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内 容 简 介 


本 书 由 浅 入 深 地 介绍 了 使 用 Photoshop CC、Flash CC、Dreamweaver CC 等 软件 进行 网 页 制作 和 网 站 组 建 
的 基础 知识 和 实用 技巧 ， 全 书 共 分 为 16 章 ， 内 容 涵 盖 了 网 页 设计 基础 、 网 页 图 像 设计 基础 、 网 页 图 像 处 理 、 
网 页 界面 设计 、 网 页 动画 设计 、 交 互动 画 设 计 、 设 置 网 页 文本 、 设 置 网 页 图 像 元 素 、 设 置 网 页 链接 、 设 计 多 
媒体 网 页 、 传 统 布局 方式 、 设 计 表 单元 素 、XHTML 标记 语言 、 设 计 网 页 元 素 样 式 、 布 局 网 页 、 网 页 行为 特 
效 等 内 容 。 
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网 站 作为 面向 世界 的 窗口 ,其 设计 和 制作 包含 多 种 技术 ,例如 平面 设计 技术 、 动 画 制作 技术 、CSS 
技术 、XHTML 技术 等 。 本 书 以 Photoshop、Flash、Dreamweaver 等 软件 为 基本 工具 .详细 介绍 如 何 通 
过 Photoshop 设计 网 站 的 界面 和 图 像 、 通 过 Flash 制作 网 站 动画 ， 以 及 通过 Dreamweaver 编写 网 页 代码 
和 设计 网 页 布局 。 除 此 之 外 ， 本 书 还 介绍 了 Web 标准 化 规范 的 相关 知识 .包括 HTML 标记 语言 、CSS 
样式 表 等 。 

本 书面 向 网 络 行业 并 立足 于 Photoshop CC、Flash CC、Dreamweaver CC 实用 知识 点 ， 配 以 大 量 实 
例 , 采用 知识 点 讲解 与 动手 练习 相 结 合 的 方式 ,详细 介绍 了 网 页 设计 和 网 站 组 建 的 制作 方法 ,以 及 各 种 
网 站 栏目 的 设计 方法 。 每 一 章 都 配合 了 丰富 的 插图 说 明 ， 生 动 具体 、 浅 显 易 懂 ， 使 用 户 能 够 迅速 上 手 ， 
轻松 掌握 功能 强大 的 Photoshop CC、Flash CC、Dreamweaver CC 在 网 页 设计 与 制作 中 的 应 用 , 为 工作 和 
学 习 带 来 事半功倍 的 效果 。 

1. 本 书 内 容 介绍 

全 书 系统 全 面 地 介绍 网 页 制作 和 网 站 组 建 的 应 用 知识 , 每 章 都 提供 了 丰富 的 实用 案例 , 用 来 巩固 所 
学 知识 。 本 书 共 分 为 16 章 ， 内 容 概括 如 下 。 

第 1 章 : 全 面 介绍 了 网 页 设计 基础 ， 包 括 网 站 设计 概述 、 网 页 设计 与 开发 技术 、 网 页 构成 与 布局 、 
网 页 配色 等 内 容 。 

第 2 章 : 全 面 介 绍 了 网 页 图 像 设计 基础 ， 包 括 Photoshop CC 简介 、 文 件 操作 、 图 像 操 作 、 使 用 选 
框 工具 、 使 用 套 索 工具 、 选 区 基本 操作 等 内 容 。 

第 3 章 : 全 面 介绍 了 网 页 图 像 处 理 , 包括 应 用 图 层 、 绘 制 与 修复 图 像 、 使 用 路 径 效 果 、 创 建 图 像 文 
本 等 内 容 。 

第 4 章 : 全 面 介绍 了 网 页 界面 设计 ， 包 括 应 用 蒙 版 、 应 用 滤 镜 、 应 用 3D 效果 、 优 化 设置 等 内 容 。 

第 5 章 : 全 面 介绍 了 网 页 动画 设计 ， 包 括 Flash CC 简介 、 管 理 库 资源 、 绘 制 矢量 图 形 、 对 象 的 基 
本 操作 、 设 置 动画 文本 等 内 容 。 

第 6 章 : 全 面 介绍 了 交互 动画 设计 ,包括 Flash 滤 镜 和 色彩 、 补 间 形 状 动画 、 传 统 补 间 动 画 、 运 动 
引导 动画 、 遮 淖 动 画 、 补 间 动 画 设计 等 内 容 。 

第 7 章 : 全 面 介绍 了 设计 网 页 文本 ， 包 括 Dreamweaver CC 简介 、 设 置 网 页 文档 、 设 置 网 页 文本 、 
设置 文档 列表 、 设 置 文本 格式 等 内 容 。 

第 8 章 : 全 面 介 绍 了 设置 网 页 图 像 元 素 . 包括 网 页 图 像 格 式 、 插入 图 像 、 设 置 图 像 属 性 、 编辑 图 像 、 
插入 图 像 对 象 等 内 容 。 

第 9 章 : 全 面 介 绍 了 设置 网 页 链接 ,包括 创建 文本 链接 、 创 建 图 像 链 接 、 编 辑 链 接 、 创 建 电子 邮件 
链接 、 创 建 脚本 链接 、 创 建 空 链接 、 创 建 错 记 链接 等 内 容 。 

第 10 章 : 全 面 介绍 了 设置 多 媒体 网 页 , 包括 插入 Flash 动画 、 插 入 Flash 视频 、 插入 HTML 5 媒体 、 
HIML 5 媒体 属性 、 插 入 媒体 插件 等 内 容 。 

第 11 章 : 全 面 介 绍 了 传统 方式 布局 ,包括 创建 表格 、 编 辑 表格 、 设 置 表格 、 排 序数 据 、 导 入 /导出 
表格 数据 、 应 用 IFrame 框架 等 内 容 。 


































































































网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 





第 12 章 : 全 面 介绍 了 设计 表单 元 素 . 包括 添加 表单 、 添 加 文本 和 网 页 元 素 、 添 加 日 期 和 时 间 元 素 、 
添加 选择 与 按钮 元 素 等 内 容 。 
第 13 章 : 全 面 介 绍 了 XHTML 标记 语言 .包括 XHTML 基本 语法 .XHTML 语法 规范 和 属性 .XHTML 
常用 元 素 等 内 容 。 

第 14 章 : 全 面 介 绍 了 设计 网 页 元 素 样式 . 包括 CSS 样式 概述 、 使 用 【CSS 设计 器 】 面 板 、CSS 选 
择 器 和 方法 、 设 置 CSS 样式 、 使 用 CSS 过 渡 效 果 等 内 容 。 

第 15 章 : 全 面 介 绍 了 布局 网 页 ， 包 括 应 用 Div 标签 、CSS 盒 模型 、 流 动 布局 、 浮 动 布局 、 绝 对 定 














位 布局 等 内 容 。 

第 16 章 : 全 面 介绍 了 网 页 行为 特效 , 包括 网 页 行为 概述 、 设 置 文本 信息 行为 、 设 置 网 页 信息 行为 、 
设置 jQuery 效果 等 内 容 。 
2. 本 书 主要 特色 


口 ” 系 统 全 面 ， 超 值 实用 。 全 书 提供 了 30 个 练习 案例 ， 通 过 示例 分 析 、 制 作 过 程 讲解 网 
页 制作 与 网 站 组 建 的 应 用 知识 。 每 章 穿插 大 量 提示 、 分 析 、 注 意 和 技巧 等 栏目 , 构筑 
了 面向 实际 的 知识 体系 。 采 用 了 紧凑 的 体例 和 版 式 , 相同 的 内 容 下 , 篇 幅 缩 减 了 30% 
以 上 ， 实 例 数 量 增加 了 50%。 

口 ”串珠 逻辑 , 收 放 自如 。 统 一 采用 三 级 标题 灵活 安排 全 书 内 容 , 摆脱 了 普通 培训 教程 按 
部 就 班 讲解 的 案 白 。 每 章 都 配 有 扩展 知识 点 、 便 于 用 户 查 阅 相 应 的 基础 知识 。 内 容 安 
排 收 放 自 如 ， 方 便 读者 学 习 书 中 内 容 。 

口 ”全 程 图 解 , 快速 上 手 。 各 章 内 容 分 为 基础 知识 和 实例 演示 两 部 分 , 全 部 采用 图 解 方 式 ， 
图 像 均 做 了 大 量 的 裁 切 、 拼 合 、 加 工 ， 信息 丰 富 ， 效 果 精 美 ,阅读 体验 轻松 上手 容 
易 。 让 读者 在 书店 中 一 翻 开 本 书 就 会 有 强烈 的 视觉 冲击 感 ， 与 同类 书 在 品质 上 拉 开 
距离 。 

口 “ 书 盘 结 合 ， 相得益彰 。 本 书 使 用 Director 技术 制作 了 多 媒体 光盘 ， 提供 了 本 书 实例 完 
整 素材 文件 和 全 程 配 音 教学 视频 文件 ， 便 于 读者 自学 和 跟踪 练习 图 书 中 内 容 。 

口 ” 新 手 进 阶 ， 加 深 印象 。 全 书 提供 了 60 多 个 基础 实用 案例 ， 通 过 示例 分 析 、 设 计 应 用 
全 面 加 深 Photoshop CC、Flash CC、Dreamweaver CC 的 基础 知识 应 用 方法 的 讲解 。 
在 新 手 进 阶 部 分 , 每 个 案例 都 提供 了 操作 简 图 与 操作 说 明 , 并 在 光盘 中 配 以 相应 的 基 
础 文件 ， 以 帮助 用 户 完全 掌握 案例 的 操作 方法 与 技巧 。 

3. 本 书 使 用 对 象 

本 书 以 Photoshop CC、Flash CC、Dreamweaver CC 软件 的 基础 知识 入 手 ， 全面 介绍 了 面向 网 页 制 
作 和 网 站 组 建 应 用 的 知识 体系 。 本 书 制作 了 多 媒体 光盘 图文并茂 能 有 效 吸 引 读者 学 习 。 本 书 适合 高 
职高 专 院 校 学 生 学 习 使 用 ,也 可 作为 计算 机 办 公 应 用 用 户 深 入 学 习 网 页 制作 及 网 站 组 建 的 培训 和 参考 
资料 。 

本 书 由 张 慧 、 瞧 丹 等 主编 . 其 中 瞧 丹 老 师 编 写 了 第 1 一 4 章 。 参 与 本 书 编写 的 人 员 ， 还 有 张 慧 、 张 
书 艳 、 葛 春雷 、 马 海 霞 . 于 伟 伟 、 王 翠 敏 、 吕 咏 、 冉 洪 艳 、 刘 红 娟 、 谢 华 、 卢 旭 、 启 亚 臣 、 程 博文 等 人 。 
由 于 作者 水 平 有 限 , 书 中 朴 漏 之 处 在 所 难免 . 欢迎 读者 朋友 登录 清华 大 学 出 版 社 的 网 站 www.tup.com.cn 
与 我 们 联系 ， 帮 助 我 们 改进 提高 。 
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随 着 互联 网 的 逐渐 发 展 , 网 站 已 成 为 企业 发 展 战略 中 的 重要 内 容 之 一 。 而 随 着 市 场 竞争 的 激烈 增长 ， 
越 来 越 多 的 网 站 开始 更 注重 网 页 的 界面 设计 ， 以 期 通过 优化 和 美化 界面 取得 竞争 的 主动 权 , 达到 吸引 更 
多 用 户 的 目的 。 网 页 是 浏览 器 与 网 站 开发 人 员 沟通 交流 的 窗口 .一 个 美观 且 易于 与 用 户 交 互 的 图 形 化 网 
页 ， 除 了 方便 用 户 浏览 网 页 内 容 和 使 用 各 种 网 页 功能 之 外 . 还 可 以 为 用 户 提供 一 种 美的 视觉 享受 。 本 章 
主要 介绍 网 页 设计 之 前 的 网 页 构成 、 网 页 配色 、 网 站 布局 等 一 些 基础 知识 .以 及 设计 网 页 所 需要 进行 的 
各 种 准备 工作 。 








网 由 和 (CC 2015 中 文 版 ) 从 新 手 到 高 手 











网 站 设计 概述 








互联 网 的 各 种 应 用 . 都 是 基于 网 站 进行 的 。 而 
网 站 又 是 由 各 种 网 页 组 成 的 . 必须 通过 网 页 传递 其 
信息 。 因 此 , 用 户 在 设计 和 创建 网 页 之 前 . 还 需要 
先 来 了 解 以 下 网 站 的 设计 概述 . 包括 网 站 的 整体 策 
划 、 网 页 的 设计 任务 等 内 容 。 


1.1.1 网 站 整体 策划 


网 站 的 整体 策划 是 一 
站 之 前 进行 的 必要 工作 。 
1. 市 场 调查 

市 场 调查 提供 了 网 站 策划 的 依据 。 在 市 场 分 析 
过 程 中 , 需要 先进 行 三 个 方面 的 调查 , 即 用 户 需求 
调查 、 竞 争 对 手 情况 调查 以 及 企业 自身 情况 的 
调查 。 
2. 市 场 分 析 

市 场 分 析 是 将 市 场 调查 的 结果 转换 为 数据 , 并 
根据 数据 对 网 站 的 功能 进行 定位 的 过 程 。 
3. 制订 网 站 技术 方案 

在 建设 网 站 时 , 会 有 多 种 技术 供用 户 选 择 , 包 
括 服务 器 的 相关 技术 (NT Server/Linux)、 数 据 库 
技术 (Access/My sql/SQL Server ) 、 前 人 台 技 术 
(XHTML+CSS/Flash/AIR) 以 及 后 人 台 技 术 (ASP/ 
ASPNET/PHP/JSP) 等 。 





个 系统 工程 .是 在 组 建 网 


在 制订 网 站 技术 方案 时 ， 切 忌 一 切 求 新 ， 育 
符合 网 站 资金 实力 和 
合适 的 技术 。 


目 采 用 最 先进 的 技术 。 


技术 水 平 的 技术 才 是 





4. 规划 网 站 内 容 
在 制订 网 站 技术 方案 之 后 , 即 可 整理 收集 的 网 
站 资源 ， 并 对 资源 进行 分 类 整理 、 划 分 栏目 等 。 
网 站 的 栏目 划分 , 标准 应 尽量 符合 大 多 数 人 理 
解 的 习惯 。 例如 . 一 个 典型 的 企业 网 站 栏目 . 通常 
包括 企业 的 简介 、 新 闻 、 产 品 , 用户 的 反馈 . 以 及 








联系 方式 等 。 产 品 栏 目 还 可 以 再 划分 子 栏目 。 
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5. 前 台 设 计 

前 台 设 计 包括 所 有 面向 用 户 的 平面 设计 工作 . 
例如 网 站 的 整体 布局 设计 、 风格 设计 、 色彩 搭配 以 
及 UI 设计 等 。 

台 开 发 

后 台 开 发 包括 设计 数据 库 和 数据 表 . 以 及 规划 
后 台 程 序 所 需要 的 功能 范围 等 。 
7. 网 站 测试 

在 发 布 网 站 之 前 需要 对 网 站 进行 各 种 严密 的 
测试 .包括 前 台 页 面 的 有 效 性 . 后 合 程序 的 稳定 性 、 
数据 库 的 可 靠 性 以 及 整体 网 站 各 链接 的 有 效 性 等 。 
8. 网 站 发 布 

在 制订 网 站 的 测试 计划 后 . 即 可 制订 网 站 发 布 
的 计划 ， 包 括 选 择 域名 、 网 站 数据 存储 的 方式 等 。 
9. 网 站 推广 

除了 网 站 的 规划 和 制作 外 .推广 网 站 也 是 一 项 
重要 的 工作 . 例如 , 登记 各 种 搜索 引擎 发 布 各 种 
广告 、 公 关 活 动 等 。 
10. 网 站 维护 

维护 是 一 项 长 期 的 工作 ,包括 对 服务 器 的 软 
件 、 硬件 维护 . 数据 库 的 维护 . 网 站 内 容 的 更 新 等 。 
多 数 网 站 还 会 定期 改版 .保持 用 户 的 新 鲜 感 。 


1.1.2 ”网 页 设计 任务 


在 设计 网 页 时 .需要 首先 了 解 网 页 设计 的 任务 
以 及 网 页 设计 的 最 终 目 的 。 











网 页 设计 是 艺术 创造 与 技术 开发 的 结合 体 ,其 
任务 是 吸引 用 户 . 为 用 户 创造 良好 的 体验 . 在 此 基 
础 上 为 网 页 的 所 有 者 提供 收益 。 任何 网 页 设计 的 行 
为 ， 都 是 围绕 这 一 最 终 目的 进行 的 。 

在 设计 网 页 时 . 可 将 网 页 根据 网 页 的 内 容 . 即 
网 页 为 用 户 提供 的 服务 类 型 分 为 三 类 . 并 根据 网 页 
的 类 型 设计 网 页 的 风格 。 

1. 资讯 类 网 站 

资讯 类 站 点 通常 是 比较 大 型 的 门户 网 站 。 这 类 
网 站 需要 为 用 户 提 供 海量 的 信息 . 在 用 户 阅读 这 些 
信息 时 寻找 商机 。 

在 设计 这 类 站 点 时 .需要 在 信息 显示 与 版 面 简 
洁 等 方面 找到 平衡 点 , 做 到 既 要 以 用 户 阅 读 信息 的 
便捷 性 为 核心 , 又 要 保持 页 面 的 整齐 和 美观 . 防止 
大 量 的 信息 造成 用 户 视觉 疲劳 。 

在 设计 文本 时 ， 可 着 力 对 文本 进行 分 色 处 理 ， 
将 各 种 标题 、 导 航 、 内 容 按照 不 同 的 颜色 区 分 。 同 
时 要 对 信息 合理 地 分 类 , 帮助 用 户 以 最 快 的 速度 找 
到 需要 的 信息 。 





























以 美国 最 大 的 在 线 购 物 网 站 亚马逊 的 首页 
。 其 在 设计 中 ,使 用 了 较为 传统 的 国字 型 





其 网 站 的 三 类 导航 使 用 了 三 种 字体 颜色 . 在 同 
一 版 块 内 的 导航 标题 使 用 橙色 粗 体 . 而 导航 内 容 则 
使 用 普通 的 蓝 色 字体 . 在 刺激 用 户 感官 的 同时 避免 


























网 页 设计 基础 





在 亚马逊 首页 中 .每 一 条 
张 预览 图 片 ， 防 止 大 段 乏 
2. 艺术 资讯 类 网 站 

艺术 资讯 类 站 点 通常 是 中 小 型 的 网 站 ,例如 一 
些 大 型 公司 、 高 校 、 企业 的 网 站 等 。 互 联网 中 的 大 
多 数 网 站 都 属于 这 一 类 型 。 

这 类 网 站 在 设计 上 要 求 较 高 . 既 需 要 展示 大 量 
的 信息 ,又 需要 突出 公司 、 高 校 和 企业 的 形象 . 还 
需要 注重 用 户 的 体验 。 
设计 这 类 网 站 时 , 尤其 需要 注意 图 像 与 文字 的 

背景 图 像 的 选用 以 及 整体 网 站 色调 的 拱 


详细 信息 都 保证 有 一 
味 的 文字 使 用 户 厌 烦 。 








平衡 
配 等 。 

在 这 类 网 站 的 首页 不 应 放置 过 多 的 信息 .清晰 
有 效 的 分 类 远 比 铺 满 屏 幕 的 产品 资料 更 容易 吸引 
用 户 的 注意 力 。 
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The feest most poneruliPhone ret 











以 著名 的 软件 和 硬件 生产 商 苹果 为 例 , 其 首页 
设计 上 以 追求 简洁 为 主 . 以 简明 的 导航 条 和 大 片 的 
留 白 给 用 户 较 大 的 想象 空间 。 

革 果 公司 在 网 站 设计 上 非常 有 心得 , 其 擅长 使 
用 简单 的 圆 角 拢 形 栏目 和 渐变 的 背景 色 使 网 站 显 
得 非常 大 气 ， 对 一 些 细节 的 把 握 非常 到 位 。 

3. 艺术 类 网 站 

艺术 类 站 点 通常 体现 在 一 些小 型 的 企业 或 工 

作 室 设 计 中 。 这 类 网 站 向 用 户 提供 的 信息 内 容 较 
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少 . 因此 设计 者 可 以 将 较 多 的 精力 放 在 网 站 的 界面 
设计 中 。 














上 图 为 俄罗斯 设计 师 foxie 的 个 人 主页 ， 通 过 
大 幅 的 留 白 以 及 简明 的 色彩 . 模拟 了 一 个 书架 . 并 
以 书架 上 的 书本 和 相框 作为 导航 条 。 

其 在 设计 中 发 布 的 信息 并 不 多 .因此 整 站 以 
Flash 制作 而 成 ， 大 量 使 用 动画 技术 ， 通 过 绚丽 的 
色彩 展示 个 性 。 


1.1.3 ”网 页 设计 实现 


在 了 解 了 设计 的 目的 后 ， 即 可 着 手 进行 设计 。 
网 页 设计 是 平面 设计 的 一 个 分 支 , 因此 在 设计 网 页 
时 , 有 一 定 的 平面 设计 基础 可 以 帮助 设计 者 更 好 更 
快 地 把 握 设计 的 精 散 。 
1. 设计 结构 图 

首先 . 应 规划 网 站 中 栏目 的 数量 及 内 容 . 策划 
网 站 需要 发 布 哪些 东西 。 

然后 ， 应 根据 规划 的 内 容 绘 制 网 页 的 结构 草 
图 . 这 一 部 分 既 可 以 在 纸 上 进 行 . 也 可 以 在 计算 机 
上 通过 画图 板 、inDesign， 或 者 其 他 更 专业 的 软件 
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结构 草图 不 需要 太 精 美 . 只 需要 表现 出 网 站 的 
布局 即 可 (关于 布局 ， 请 参考 本 章 之 前 的 内 容 。) 
2. 设计 界面 

在 纸 上 或 电脑 上 绘制 好 网 页 的 结构 图 之 后 . 即 
可 根据 网 站 的 基本 风格 , 在 计算 机 上 使 用 Tllistrator 
或 CorelDraw 等 矢量 图 形 软件 或 Photoshop 、 
Fireworks 等 位 图 处 理 软件 绘制 网 页 的 Logo、 按 钮 
和 图 标 。 

Logo、 按 钮 、 图 标 等 都 是 网 页 界面 设计 的 重 
要 组 成 部 分 。 设计 这 些 内 容 时 需要 注意 整体 界面 的 
风格 一 致 性 , 包括 从 色调 到 图 形 的 应 用 . 圆 角 和 珑 形 
与 普通 矩形 的 分 布 等 。 

其 中 ,设计 Logo 时 ， 可 使 用 一 些 抽象 的 几何 
图 形 进行 旋转 、 拼 接 , 或 将 各 种 字母 和 文字 进行 抽 
象 变化 。 例 如 ,倾斜 、 切 去 直角 、 用 线条 切割 、 连 
接 笔画 、 反 色 等 。 


人 
(中 Paci\/ 


按钮 的 设计 较为 复杂 。 常见 的 按钮 主要 可 分 为 
圆 角 矩 形 、 普 通 和 矩形 、 梯 形 、 圆 形 以 及 不 规则 图 
形 等 。 

在 网 页 中 ,水 平方 向 导航 菜单 的 按钮 设计 比较 
随意 . 可 以 使 用 各 种 形状 。 而 垂直 方向 的 导航 菜单 
则 多 使 用 矩形 或 圆 角 矩形 . 以 使 各 按钮 贴 得 更 加 紧 


密 ,给 用 户 以 协调 的 感觉 。 
= 
































图 标 是 界面 中 非常 重要 的 组 成 部 分 . 可 以 起 到 
画龙点睛 的 作用 。 在 绘制 图 标 时 . 需要 注意 图 标 必 























须 和 其 代表 的 内 容 有 明显 的 联系 。 
例如 .多数 网 站 的 首页 图 标 都 会 绘制 一 栋 房 
子 . 而 多 数 网 站 的 联系 方式 图 标 都 是 电话 、 信纸 等 
通信 的 方式 ,这样 的 图 标 会 使 用 户 一 眼 就 看 出 其 
作用 。 
而 如 果 使 用 过 于 抽象 的 图 标 . 则 容易 被 用 户 误 
解 .或 影响 用 户 使 用 网 站 的 功能 。 


、 l 
从 革 兽 装 
a 
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ee 





在 设计 网 页 时 .尽量 少 用 18px 以 上 的 字体 (输出 
为 图 像 的 文本 除外 ) 。 

在 字体 的 选择 上 ， 网 站 的 文本 是 给 用 户 阅 读 
的 。 越 是 大 量 的 文本 ， 越 不 应 该 使 用 过 于 花哨 的 
字体 。 

如 针对 的 用 户主 要 以 使 用 Windows XP 系 统 和 
纯 平 显示 器 为 主 , 则 应 使 用 宋体 或 新 宋体 等 作为 主 
要 字体 。 如 果 用 户 是 以 使 用 Vista 系统 和 液晶 显示 
器 为 主 ， 则 应 使 用 微软 雅 黑 字 体 ， 以 获得 更 佳 的 
体验 。 

4. 制作 网 页 概念 图 

在 设计 完成 网 页 的 各 种 界面 元 素 后 . 即 可 根据 
这 些 界面 元 素 ， 使 用 Photoshop 或 Fireworks 等 图 
像 处 理 软件 制作 网 页 的 概念 图 。 




















3. 设计 字体 

字体 是 组 成 网 页 的 最 主要 元 素 之 一 。 合 理 分 
配 字体 ， 可 以 使 网 站 更 加 美观 ， 也 更 便于 用 户 
阅读 。 

在 设计 网 页 的 字体 时 ， 应 先 对 网 页 进行 分 类 
处 理 。 

对 于 多 数 浏览 器 和 操作 系统 而 言 .汉字 是 非常 
复杂 的 文字 , 多 数 中 文字 体 都 是 无 法 在 所 有 字号 下 
正常 清晰 显示 的 。 

以 宋体 字 为 例 ，10px 以 下 的 宋体 通常 会 被 显 
示 为 一 个 黑 点 (在 手持 设备 上 这 点 尤为 突出 ) 。 而 
20px 大 小 的 宋体 ， 则 会 出 现 明显 的 锯齿 .笔画 粗 
细 不 匀 。 

即使 是 微软 设计 的 号 称 最 清晰 的 中 文字 体 微 
软 雅 黑 ， 也 无 法 在 所 有 的 分 辨 率 及 字号 下 清晰 地 
显示 。 

经 过 详细 的 测试 ， 中 文字 体 在 12px、14px、 
16px (最 多 不 超过 18px) 的 字号 下 ， 显 示 得 最 为 
清晰 美观 。 

因此 ， 多 数 网 站 都 应 使 用 12 像素 大 小 的 字体 
作为 标准 字体 ， 而 将 14px 的 字体 作为 标题 字体 。 





网 页 概念 图 的 分 辩 率 应 照顾 到 用 户 的 显示 器 
分 辩 率 。 针 对 国内 的 用 户 的 显示 器 设置 , 大 多 数 用 
户 使 用 的 都 是 17 英寸 甚至 更 大 的 显示 器 ， 分 辨 率 
大 多 为 1024 x 768 以 上 。 去 除 浏览 器 的 垂直 滚动 条 
后 ,页 面 的 宽度 应 为 1003 像素 。 高 度 则 尽量 不 应 
超过 屏幕 高 度 的 5 倍 到 10 倍 ( 即 620 x 5=3100 像 
素 到 6200 像素 之 间 ) 。 


如 果 有 条 件 的 话 ,还 应 该 针对 多 种 分 辨 率 的 
人 群 (例如 ， 宽 屏 显示 器 的 1440X960、 上 
网 本 的 1280X720， 老 旧 的 台式 机 或 笔记 本 


的 800X600， 以 及 各 种 手持 设备 的 720 X 
480) 设计 多 种 概念 图 。 针 对 各 种 用 户 群体 
进行 界面 设计 。 





概念 图 的 作用 主要 包括 两 个 方面 。 一 方面 . 设 
计 者 可 以 为 用 户 或 网 站 的 投资 者 在 网 页 制作 之 前 
先 提供 一 份 网 页 的 预览 . 然后 根据 用 户 或 投资 者 的 
意见 ， 对 网 页 的 结构 进行 调整 和 改良 。 

另 一 方面 .设计 者 可 以 根据 概念 图 制作 切片 网 
页 . 然后 再 根据 切片 快速 为 网 站 布局 . 提高 网 页 制 
作 的 效率 。 
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5. 切片 的 优化 

切片 的 优化 是 十 分 必要 的 。 优化 后 的 切片 , 可 
以 减 小 用 户 在 访问 网 页 时 消耗 的 时 间 , 同时 提高 网 
页 制作 的 效率 。 

对 于 早期 以 调制 解 调 器 用 户 为 主 的 国内 网 络 
而 言 . 需要 尽量 避免 大 面积 的 图 像 . 防止 这 些 图 像 
在 未 下 载 完成 时 网 页 出 现 空白 。 通常 的 做 法 是 通过 
切片 工具 将 图 像 切 为 多 块 ， 实 现 分 块 下 载 。 

然而 随 着 网 络 传输 速度 的 发 展 . 用 户 用 于 下 载 
各 种 网 页 图 像 的 时 间 已 经 大 为 缩短 . 请 求 下 载 图 像 
的 时 间 已 超过 了 下 载 图 像 本 身 的 时 间 。 下 载 1 张 
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100kb 的 图 像 . 消耗 的 时 间 要 比 下 载 10 张 10kb 的 
图 像 更 少 。 

因此 ,多数 网 站 都 开始 着 手 将 各 种 小 图 像 合并 
为 大 的 图 像 . 以 减少 用 户 请 求 下 载 的 时 间 , 提高 
页 的 访问 速度 。 

6. 编写 网 页 代码 

在 Photoshop 或 Fireworks 中 设计 完成 网 页 的 
概念 图 , 并 制作 切片 网 页 后 , 最 终 还 是 需要 输出 为 
XHTML+CSS 的 代码 。 

网 页 技术 的 发 展 , 使 网 页 的 制作 越 来 越 像 一 个 
系统 的 软件 工程 。 从 基础 的 XHTML 结构 到 CSS 
样式 表 的 编写 ， 再 到 JavaScript 交互 脚本 的 开发 ， 
是 网 页 制作 的 收尾 工程 。 

7. 优化 页 面 

在 设计 完成 网 页 后 ， 还 需要 对 网 页 进行 优化 ， 
提高 页 面 访问 速度 ， 以 及 页 面 的 适应 性 。 

设计 者 应 按照 Web 标准 编写 各 种 网 页 的 代码 ， 
并 对 代码 进行 规范 化 测试 。 通 过 W3C 的 官方 网 站 
验证 代码 的 准确 性 。 

同时 , 还 应 根据 当前 主流 的 各 种 浏览 器 (IE9、 
IE10、IE11. 以 及 FireFox、Safari、Opera、Chrome 
等 ) 和 各 种 分 辨 率 的 显示 设备 测试 兼容 性 ， 编 写 
CSS Hack 和 JavaScript 检测 脚本 , 以 保证 网 页 在 各 
种 浏览 器 中 都 可 正常 显示 。 




















1 怒放 | 网 页 设计 与 开发 技术 


网 页 的 设计 与 开发 是 一 项 复杂 的 工程 . 在 设计 
与 开发 的 过 程 中 ,可 使 用 多 种 技术 。 总 体 而 言 . 网 
页 的 设计 与 开发 可 分 为 前 台 技 术 和 后 合 技术 两 
大 类 。 


在 1 








前 台 技 术 


前 全 技术 是 指 在 整个 网 站 体系 中 . 用 于 实现 显 
示 层 的 技术 . 或 者 面向 网 站 用 户 的 技术 。 目 前 应 用 
于 前 合 的 技术 包括 如 下 几 种 。 
1. XHTML 技术 

XHTML (eXtensible Hyper Text Markup 








Language, 可 扩展 的 超 文本 标记 语言 ) 是 由 HIML 
语言 发 展 起 来 的 一 种 标记 语言 。 

在 W3C 的 网 页 标准 化 体系 中 ，XHTML 属于 
网 页 的 结构 技术 。 
2. CSS 技术 

CSS (Cascading Style Sheets， 层 翅 样 式 表 ) 
是 一 种 数据 表 文 件 ， 在 该 类 数据 表 中 ， 存储 了 网 
页 结构 语言 的 各 种 样式 . 以 及 显示 方式 等 内 容 , 并 
调用 。 

在 W3C 的 网 页 标准 化 体系 中 ,CSS 属于 网 页 

















的 表现 技术 。 
3. ECMAScript 技术 

ECMAScript 技术 是 由 ECMA 国际 (European 
Computer Manufacturers Association International . 
欧洲 计算 机 制造 商 协会 , 一 个 由 各 厂商 组 成 的 国际 
商业 化 标准 组 织 ) 制定 的 标准 化 脚本 语言 . 其 前 身 
为 JavaScript 脚本 语言 。 

ECMAScript 脚本 语言 包含 多 种 子 集 ， 例 如 
微软 的 JScript 和 JScriptNET 、Adobe 的 
AcrionScript 以 及 Digital Mars 的 DMDScript 等 。 

在 W3C 的 网 页 标准 化 体系 中 . ECMAScript 
属于 网 页 的 行为 技术 。 

4. Ajax 技术 

Ajax (Asynchronous JavaScript and XML. 异 
步 JavaScript 与 XML) 是 一 种 由 JavaScript 脚本 语 
言 扩 展 而 来 的 网 页 前 合 开发 技术 。 

Ajax 允许 客户 端 进行 简单 的 数据 处 理 ， 并 与 
服务 器 端 进行 异步 通信 , 因此 可 以 在 不 刷新 页 面 的 
情况 下 维护 数据 , 减 小 了 服务 器 程序 的 负担 , 并 提 
高 了 页 面 的 执行 效率 ,降低 了 网 络 带宽 的 占用 。 
5. E4X 技术 

E4X (ECMAScript for XML, ECMAScript 对 
XML 的 扩展 ) 是 一 种 ECMAScript 的 扩展 技术 。 
其 提供 了 一 种 更 直观 、 语 法 更 简洁 的 DOM 接口. 
帮助 ECMAScript 代码 访问 XML 数据 ， 实 现 更 快 
的 访问 速度 及 更 好 的 支持 。 

6. 切片 技术 

切片 技术 是 应 用 于 网 页 图 形 处 理 的 一 种 技术 . 
其 最 早出 现 于 Adobe 公司 的 ImageReady 软件 中 
可 将 整 张 图 片 切割 为 几 张 图 片 ， 并 输出 一 个 网 页 ， 
将 图 片 作 为 网 页 表格 或 层 中 的 内 容 。 

切片 技术 的 出 现 , 提高 了 平面 设计 转换 为 网 页 
设计 的 效率 。 目前. 可 以 使 用 切片 技术 的 图 像 处 理 
软件 包括 Photoshop (ImageReady 目前 已 被 整合 到 
Photoshop 中 ) 、 Fireworks 、Jlustrator 以 及 
CorelDRAW (在 CorelDRAW 中 称 作 裁 切 工具 ) 。 
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后 台 技术 


后 台 技 术 是 指 在 整个 网 站 体系 中 , 用 于 实现 控 
制 层 或 模型 层 的 技术 , 或 者 面向 网 站 数据 管理 的 技 
术 。 目 前 应 用 于 后 合 的 技术 包括 如 下 几 种 。 
1. ASP 技术 

ASP (Active Server Pages， 动态 服务 网 页 ) 是 
微软 公司 开发 的 一 种 由 VBScript 脚本 语言 或 
JavaScript 脚本 语言 调用 FSO (File System Object. 
文件 系统 对 象 ) 组 件 实现 的 动态 网 页 技术 。 

ASP 技术 必须 通过 Windows 的 ODBC 与 后 台 
数据 库 通信 ， 因 此 只 能 应 用 于 Windows 服务 器 中 。 
ASP 技术 的 解释 器 包括 两 种 , 即 Windows 9X 系统 
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2. ASPNET 技术 

ASPNET 是 由 微软 公司 开发 的 ASP 后 续 技 
术 ， 其 可 由 C#、VB.net、Perl 及 Python 等 编程 语 
言 编写 ， 通 过 调用 System.Web 命名 空间 实现 各 种 
网 页 信息 处 理工 作 。 

ASPNET 技术 主要 应 用 于 Windows NT 系统 
中 ,需要 IIS 及 .NET Framework 的 支持 ,通过 Mono 
平台 . ASPNET 也 可 以 运行 于 其 他 非 Windows 系 
统 中 。 





虽然 ASPNET 程序 可 以 由 多 种 语言 开发 ， 


但 是 最 适合 编写 ASPNET 程序 的 语言 仍然 
是 C# 语 言 。 
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3. JSP 技术 


JSP (JavaServer Pages，Java 服务 网 页 ) 是 由 
Sun 公司 开发 的 ， 以 Java 编写 、 动 态 生 成 HIML、 
XML 或 其 他 格式 文档 的 技术 。 

JSP 技术 可 应 用 于 多 种 平台 ， 包括 Windows、 
Linux、UNIX 及 Solaris。 

JSP 技术 的 特点 在 于 , 如 果 客 户 端 第 1 次 访问 
JSP 页 面 ， 服务器 将 出 现 解释 源 程序 的 Java 代码 ， 
然后 执行 页 面 的 内 容 ， 因 此 速度 较 慢 。 

而 如 果 客户 端 是 第 2 次 访问 ， 则 服务 嚣 将 直 
接 调 用 Servlet , 无 需 再 对 代码 进行 解析 , 因此 速度 
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4. PHP 技术 

PHP (Personal Home Page, 个 人 主页 ) 也 是 
一 种 跨 平台 的 网 页 后 台 技 术 。 其 最 早 由 丹麦 人 
Rasmus Lerdorf 开发 , 并 由 PHP Group 和 开放 源 代 
码 社 群 维护 ， 是 一 种 免费 的 网 页 脚本 语言 。 

PHP 是 一 种 应 用 广泛 的 语言 ， 其 多 在 服务 器 
端 执行 ， 通 过 PHP 代码 产生 网 页 并 提供 对 数据 库 
的 读 取 。 


























局 再 网 页 构成 与 布局 


通过 前 面 的 内 容 , 用 户 已 了 解 了 网 站 的 整体 策 
划 、 网 页 的 设计 任务 和 技术 。 本 小 节 将 重点 介绍 网 
页 的 版 块 构成 和 布局 内 容 。 


1.3.1 网 页 版 块 构成 


网 页 是 由 各 种 版 块 构成 的 。Internet 中 的 网 页 
内 容 各 异 。 然而 多 数 网 页 都 是 由 一 些 基 本 的 版 块 组 
成 的 , 包括 Logo、 导 航 条 、Banner、 内 容 版 块 、 
版 尾 和 版 权 等 。 
1. Logo 图 标 

Logo 是 企业 或 网 站 的 标志 ， 是 微 标 或 者 商标 
的 英文 说 法 , 起 到 对 徽标 拥有 公司 的 识别 和 推广 的 
作用 .通过 形象 的 Logo 可 以 让 消费 者 记 住 公司 主 
体 和 品牌 文化 。 网 络 中 的 Logo 徽标 主要 是 各 个 网 
站 用 来 与 其 他 网 站 链接 的 图 形 标志 . 代表 一 个 网 站 
或 网 站 的 一 个 版 块 。 例 如 ， 微 软 的 Logo。 












































2. 导航 条 

导航 条 是 网 站 的 重要 组 成 标签 ,合理 安排 的 导 
航 条 可 以 帮助 浏览 者 迅速 查找 到 需要 的 信息 。 例 
如 ， 新 浪 网 的 导航 条 。 
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3. Banner 
Banner 的 中 文 直译 为 旗帜 、 网 幅 或 横幅 ， 意 


译 则 为 网 页 中 的 广告 。 多 数 Banner 都 以 JavaScript 
技术 或 Flash 技术 制作 的 ， 通 过 一 些 动画 效果 . 展 
示 更 多 的 内 容 ， 并 吸引 用 户 观看 。 
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4. 内 容 版 块 

网 页 的 内 容 版 块 通常 是 网 页 的 主体 部 分 。 这 一 
版 块 可 以 包含 各 种 文本 、 图 像 、 动 画 、 超 链接 等 。 
例如 .蔡司 光 学 网 站 的 内 容 版 块 。 














5. 版 尾 版 块 
版 尾 是 网 页 页 面 最 底 端的 版 块 .通常 放置 网 站 
的 联系 方式 、 友 情 链 接 和 版 权 信息 等 内 容 。 
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1.3.2 ”网 页 布局 

网 页 布局 是 指 对 网 页 中 的 文字 、 图 形 等 内 容 . 
也 就 是 网 页 中 的 元 素 进行 统筹 计划 与 安排 。 无 论 是 
在 纸 上 布 局 , 还 是 通过 软件 进行 布局 , 都 需要 了 解 

















第 1 章 网 页 设计 基础 





网 页 中 最 基本 的 布局 方式 。 
1.“ 国 ” 字 型 

“ 国 ” 字 型 网 页 布局 又 称 “ 同 ” 字 型 网 页 布局 ， 
其 最 上 方 为 网 站 的 Logo、Banner 及 导航 条 。 接 下 
来 是 网 站 的 内 容 版 块 。 

在 内 容 版 块 左 右 两 侧 通 常会 分 列 两 小 条 内 容 ， 
可 以 是 广告 、 友 情 链接 等 . 也 可 以 是 网 站 的 子 导航 
条 。 中 间 是 主要 部 分 , 与 左右 一 起 罗列 到 底 . 最 下 
面 则 是 网 站 的 版 尾 或 版 权 版 块 。 
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2. 拐角 型 

拐角 型 布局 也 是 一 种 常见 的 网 页 结构 布局 , 其 
与 “ 国 ” 字 型 布局 只 是 在 形式 上 有 所 区 别 , 实际 差 
异 不 大 。 
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上 面 是 标题 及 广告 横幅 . 接 下 来 的 左 侧 或 者 右 
侧 是 一 窄 列 链接 等 , 正文 是 在 很 宽 的 区 域 中 . 下 面 
也 是 一 些 网 站 的 辅助 信息 。 在 这 种 类 型 中 , 一 种 很 
常见 的 类 型 是 : 最 上 面 是 标题 及 广告 . 右 侧 是 导 
链接 或 者 广告 。 这 种 布局 的 网 页 比 “ 国 ” 字 型 布局 
的 网 页 稍微 个 性 化 一 些 ， 常 用 于 一 些 娱乐 性 网 站 。 
3. 左右 框架 型 

这 是 一 种 被 垂直 划分 为 两 个 或 更 多 个 框架 
的 网 页 布局 结构 ,类似 于 将 上 下 框架 型 布局 旋转 
90” 之 后 的 效果 。 

左右 框架 型 网 页 布局 一 般 左 面 是 导航 链接 ,有 
时 最 上 面 会 有 一 个 小 的 标题 或 标志 . 右 侧 是 正文 。 
通常 会 被 应 用 到 一 些 个 性 化 的 网 页 或 大 型 论坛 网 





页 等 ， 具 有 结构 清晰 、 一 目 了 然 的 优点 。 
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4. 封面 型 

这 种 类 型 的 网 页 ,通常 作为 一 些 个 性 化 网 站 的 
首页 ， 以 精美 的 动画 ,加 上 几 个 链接 或 “进入 ” 按 
钮 ， 甚 至 只 在 图 片 或 动画 上 做 超 链接 。 

这 种 类 型 大 部 分 出 现在 企业 网 站 和 个 人 主页 , 
如 果 处 理 得 好 . 会 给 人 带 来 赏心悦目 的 感觉 。 
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网 页 设计 是 平面 设计 的 一 个 分 支 ， 和 其 他 平 
面 设计 类 似 , 对 色彩 都 有 较 大 的 依赖 性 。 色彩 作为 
网 页 视觉 元 素 的 一 种 . 不 仅 情感 丰富 . 其 形式 的 美 
感 也 使 浏览 者 得 以 视觉 和 心理 的 享受 。 将 色彩 成 功 
地 运用 在 网 页 创意 中 ， 可 以 强化 网 页 的 视觉 张力 。 


1.4.1 色彩 的 基础 概念 


色彩 是 网 站 最 重要 的 一 
网 站 进行 色彩 搭配 之 前 ， 
1. 色彩 与 视觉 原理 

色彩 的 变化 是 变幻 莫 测 的 . 这 是 因为 物体 本 身 





个 部 分 .在 学 习 如 何 为 
首先 要 来 认识 颜色 。 











除了 其 自身 的 颜色 外 ， 有 时 也 会 因为 周围 的 颜色 ， 
以 及 光源 的 颜色 而 所 有 改变 。 

口 光 与 色 

光 在 物理 学 上 是 电磁 波 的 一 部 分 ， 其 波长 为 
700~400nm, 在 此 范围 称 为 可 视 光 线 。 当 把 光线 引 
入 三 棱镜 时 ， 光 线 被 分 离 为 红 、 橙 、 黄 、 绿 、 青 
蓝 、 紫 . 因而 得 知 自然 光 是 七 色光 的 混合 。 这 种 现 
象 称 作 光 的 分 解 或 光谱 . 七 色光 谱 的 颜色 分 布 是 按 
光 的 波长 排列 的 . 如 下 图 所 示 , 可 以 看 出 红色 的 波 
长 最 长 ， 紫色 的 波长 最 短 。 
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光 是 以 波动 的 形式 进行 直线 传播 的 .具有 波长 
和 振幅 两 个 因素 。 不 同 的 波长 长 短 产生 色相 差别 。 
不 同 的 振幅 强 弱 大 小 产生 同一 色相 的 明暗 差别 。 光 
在 传播 时 有 直射 、 反射、 透射 、 漫 射 、 折 射 等 多 种 
形式 。 

光 直 射 时 直接 传 入 人 了 眼 , 视觉 感受 到 的 是 光源 
色 。 当 光源 照射 物体 时 ， 光 从 物体 表面 反射 出 来 ， 
人 有 眼 感受 到 的 是 物体 表面 色彩 。 当 光照 射 时. 如 遇 
玻璃 之 类 的 透明 物体 , 人 眼看 到 是 透 过 物体 的 穿 透 
































口 色相 

色相 指 色 彩 的 相貌 ， 是 区 别 色彩 种 类 的 名 称 。 
是 根据 该 色光 波长 划分 的 ， 只 要 色彩 的 波长 相同 ， 
色相 就 相同 , 波长 不 同 才 产生 色相 的 差别 。 红 、 橙 、 
黄 、 绿 、 蓝 、 紫 等 每 一 个 都 代表 一 类 具体 的 色相 ， 
它们 之 间 的 差别 就 属于 色相 差别 。 当 用 户 称呼 到 其 

















色 , 光 在 传播 过 程 中 ,受到 物体 的 干涉 时 , 则 产生 
漫 射 , 对 物体 的 表面 色 有 一 定 影响 。 如 通过 不 同 物 
体 时 产生 方向 变化 , 称 为 折射 , 反映 至 人 眼 的 色光 
与 物体 色相 同 。 

口 物体 色 

自然 界 的 物体 五 花 八 门 、 变 化 万 千 . 它们 本 身 
虽然 大 都 不 会 发 光 , 但 都 具有 选择 性 地 吸收 、 反 射 、 
透射 色光 的 特性 。 当然, 任何 物体 对 色光 不 可 能 全 
部 吸收 或 反射 . 因此 . 实际 上 不 存在 绝对 的 黑色 或 
白色 。 

物体 对 色光 的 吸收 、 反 射 或 透射 能 力 . 很 受 物 
体 表 面 肌理 状态 的 影响 。 但 是 . 物体 对 色光 的 吸收 
与 反射 能 力 虽 是 固定 不 变 的 . 而 物体 的 表面 色 却 会 
随 着 光源 色 的 不 同 而 改变 , 有 时 甚至 失去 其 原 有 的 
色相 感觉 。 所 谓 的 物体 “固有 色 ”. 实际 上 不 过 是 
常 光 下 人 们 对 此 的 习惯 而 已 。 例 如 在 闪烁 .强烈 的 
各 色 需 虹 灯光 下 ., 所 有 建筑 几乎 都 失去 了 原 有 本 色 
而 显得 奇异 莫 测 。 
2. 色彩 三 要 素 

自然 界 的 色彩 虽然 各 不 相同 . 但 任何 有 彩色 的 
色彩 都 具有 色相 、 亮 度 、 饱 和 度 这 三 个 基本 属性 . 
也 称 为 色彩 的 三 要 素 。 






























































某 一 色 的 名 称 时 ， 就 会 有 一 个 特定 的 色彩 印象 , 
这 就 是 色相 的 概念 。 正 是 由 于 色彩 具有 这 种 具体 相 
貌 特征 , 用 户 才能 感受 到 一 个 五 彩 缤纷 的 世界 。 如 
果 说 亮度 是 色彩 隐秘 的 骨骼 , 色相 就 很 像 色彩 外 表 
华美 的 肌肤 。 色 相 体现 着 色彩 外 向 的 性 格 , 是 色彩 
的 灵魂 。 
































如 果 把 光谱 的 红 、 橙 黄 、 绿 、 蓝 、 紫 诸 色 带 首 
尾 相连 ,制作 一 个 圆 环 ， 在 红 和 紫 之 间 插 入 半幅 ， 
构成 环形 的 色相 关系 . 便 称 为 色相 环 。 在 6 种 基本 
色相 各 色 中 间 加 插 一 个 中 间 色 . 其 首尾 色相 按 光谱 
顺序 为 : 红 、 醒 红 、 柯 、 黄 、 黄 绿 、 绿 、 青 绿 、 蓝 
绿 、 蓝 、 蓝 紫 、 紫 、 红 紫 ， 构成 十 二 基本 色相 .这 
十 二 色相 的 彩 调 变化 . 在 光谱 色 感 上 是 均匀 的 。 如 
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果 进 一 步 再 找 出 其 中 间 色 . 便 可 以 得 到 二 十 四 个 黑白 网 页 与 彩色 网 页 之 间 存 在 着 非常 大 的 差 
色相 。 异 。 大 多 数 情况 下 黑白 网 页 给 浏览 者 的 视觉 冲击 力 


不 如 彩色 网 页 效果 强烈 . 同时 对 作品 网 页 的 风格 也 
有 着 一 些 局 限 性 。 而 色彩 的 选择 不 仅仅 决定 了 作品 
的 风格 .同时 也 使 得 作品 更 加 饱满 、 富 有 魅力 。 








二 十 四 色相 环 


口 饱和 度 

饱和 度 是 指 色 彩 的 纯净 程度 。 可见光 辐 射 , 有 
波长 相当 单一 的 , 有 波长 相当 混杂 的 , 也 有 处 在 两 
者 之 间 的 , 黑 、 白 、 灰 等 无 彩色 就 是 波长 最 为 混杂 . 
纯度 .色相 感 消失 造成 的 。 光 谱 中 红 .、 橙 、 黄 、 绿 、 
蓝 、 紫 等 色光 都 是 最 纯 的 高 纯度 的 色光 。 























饱和 度 取决 于 该 色 中 含 色 成 分 和 消 色 成 分 。 口 训 度 | 
( 黑 、 白 。 灰 ) 的 比例 ， 含 色 成 分 越 大 ， 饱 和 度 越 ”亮度 是 色彩 赖 于 形成 空间 感 与 色彩 体 量 感 的 





大 ， 消 色 成 分 越 大 ， 亿 和 度 越 小 也 就 是 说 , 向 任 主要 依据 ,起 着 “骨架 ”的 作用 ,在 无 彩色 中 ， 竞 
何 一 种 色彩 中 加 入 黑 、 白 . 灰 都 会 降低 它 的 饱和 度 ， 度 最 高 的 色 为 白色 , 亮度 最 低 的 色 为 黑色 ,中 间 存 





加 得 越 多 就 降 得 越 低 。 在 一 个 从 亮 到 暗 的 灰色 系列 。 
当 在 蓝 色 中 混入 了 白色 时 .虽然 仍旧 具有 蓝 色 亮度 在 三 要 素 中 具有 较 强 的 独立 性 , 它 可 以 不 





相 的 特征 ,但 它 的 鲜艳 度 降 低 了 ,亮度 提高 了 . 成 ” 带 任何 色相 的 特征 而 通过 黑白 灰 的 关系 单独 呈现 
为 淡 蓝 色 ， 当 混 入 黑色 时 ,鲜艳 度 降低 了 .亮度 变 。 出 来 。 

暗 了 .成 为 蜡 蓝 色 ; 当 混 入 与 蓝 色 亮 度 相似 的 中 性 
灰 时 ， 它 的 亮度 没有 改变 ,饱和 度 降低 了 ,成 为 友 
蓝 色 。 采 用 这 种 方法 有 十 分 明显 的 效果 . 就 是 从 纯 
色 加 灰 渐 变 为 无 饱和 度 灰 色 的 色彩 饱和 度 序列 。 
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色相 与 饱和 度 则 必须 依赖 一 定 的 明暗 才能 显 
现 . 色彩 一 旦 发 生 ， 明 暗 关系 就 会 同时 出 现 , 在 用 
户 进行 一 幅 素描 的 过 程 中 . 需要 把 对 象 的 有 彩色 关 
系 抽象 为 明暗 色调 . 这 就 需要 有 对 明暗 的 敏锐 判断 
力 。 用 户 可 以 把 这 种 抽象 出 来 的 亮度 关系 看 作 色 彩 
的 骨骼 ， 它 是 色彩 结构 的 关键 。 
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阳台 











3. 色彩 的 混合 

客观 世界 中 的 事物 绚丽 多 彩 , 调 色 板 上 色彩 变 
化 无 限 , 但 如 果 将 其 归纳 分 类 ,基本 上 就 是 两 大 类 : 
一 类 是 原色 ， 即 红 、 黄 、 蓝 ; 另 一 类 就 是 混合 色 。 
而 使 用 间 色 再 调配 混合 的 颜色 ， 称 为 复 色 。 从 理 
论 上 讲 ， 所 有 的 间 色 、 复 色 都 是 由 三 原色 调和 而 
成 的 。 

在 构成 网 页 的 色彩 布局 时 ， 原 色 是 强烈 的 ， 
混合 色 较 温和 ， 复 色 在 明度 上 和 纯度 上 较 弱 ,各 
类 间 色 与 复 色 的 补充 组 合 ， 形 成 丰富 多 彩 的 画面 
效果 。 

口 原色 理论 

所 谓 三 原色 ,就 是 指 这 三 种 色 中 的 任意 一 色 都 
不 能 由 另外 两 种 原色 混合 产生 , 而 其 他 颜色 可 以 由 
这 三 原色 按照 一 定 的 比例 混合 出 来 . 色彩 学 上 将 这 
三 个 独立 的 颜色 称 为 三 原色 。 

口 混 色 理论 

将 两 种 或 多 种 色彩 互相 进行 混合 . 造成 与 原 有 
色 不 同 的 新 色彩 称 为 色彩 的 混合 ,它们 可 归纳 成 加 
色 法 混合 、 减 色 法 混合 、 空 间 混 合 三 种 类 型 。 

加 色 法 混合 是 指 色 光 混 合 , 也 称 第 一 混合 . 当 
不 同 的 色光 同时 照射 在 一 起 时 . 能 产生 另外 一 种 新 
的 色光 . 并 随 着 不 同色 混合 量 的 增加 . 混 色 光 的 明 
度 会 逐渐 提高 ,将 红 ( 橙 ) 、 绿 、 蓝 ( 紫 ) 三 
光 分 别 作 适 当 比 例 的 混合 . 可 以 得 到 其 他 不 同 的 色 
光 。 反之. 其 他 色光 无 法 混 出 这 三 种 色光 来 . 故 称 
其 为 色光 的 三 原色 ， 它们 相 加 后 可 得 白光 。 
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原色 绿 





间 色 蓝 









减 色 法 混合 即 色 料 混合 . 也 称 第 二 混合 。 
源 不 变 的 情况 下 , 两 种 或 多 种 色 料 混合 后 所 产生 的 
新 色 料 . 其 反射 光 相 当 于 白光 减 去 各 种 色 料 的 吸收 
光 , 反射 能 力 会 降低 。 故 与 加 色 法 混合 相反 . 混合 
后 的 色 料 色彩 不 但 色相 发 生变 化 , 而 且 明 度 和 纯度 
都 会 降低 。 所 以 混合 的 颜色 种 类 越 多 . 色彩 就 越 暗 
越 混 淄 ， 最 后 近似 于 黑 灰 的 状态 。 


在 光 














空间 混合 法 亦 称 中 性 
或 多 种 颜色 穿插 . 并 时 在 起 于 一 定 的 视觉 空间 
之 外 .能 在 人 眼中 造成 混合 的 效果 . 故 称 空间 混合 。 
其 实 颜色 本 身 并 没有 真正 混合 ,它们 不 是 发 光 体 . 
而 只 是 反射 光 的 混合 。 因 此 . 与 减 色 法 相 比 . 增加 
了 一 定 的 光 刺 激 值 . 其 明度 等 于 参加 混合 色光 的 明 
度 平均 值 ， 既 不 减 也 不 加 。 




















由 于 它 实际 比 减 色 法 混合 明度 显然 要 高 . 因此 
色彩 效果 显得 丰富 、 响 亮 , 有 一 种 空间 的 颤动 感 . 
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表现 自然 物体 的 光 感 ， 更 为 闪耀。 
1.4.2 色彩 的 模式 


简单 地 讲 , 颜色 模式 是 一 种 用 来 确定 显示 和 打 
印 电 子 图 像 色彩 的 模型 . 即 一 幅 电子 图 像 用 什么 样 
的 方式 在 计算 机 中 显示 或 者 打印 输出 。Photoshop 
中 包含 了 多 种 颜色 模式 , 每 种 模式 的 图 像 描述 和 重 
现 色彩 的 原理 及 所 能 显示 的 颜色 数量 各 不 相同 。 常 
见 的 有 如 下 4 种 模式 。 
1. RGB 颜色 模式 

RGB 色彩 模式 是 工业 界 的 一 种 颜色 标准 . 是 
通过 对 红 (Red)、 绿 (Green)、 蓝 (Blue) 三 个 颜 
色 通 道 的 变化 以 及 它们 相互 之 间 的 又 加 来 得 到 各 
式 各 样 的 颜色 的 。RGB 代表 红 、 绿 、 蓝 三 个 通道 
的 颜色 , 这 个 标准 几乎 包括 了 人 类 视力 所 能 感知 的 
所 有 颜色 , 是 目前 运用 最 广 的 颜色 系统 之 一 , 如 下 
图 所 示 。 其 中 每 两 种 颜色 之 间 的 颜色 是 等 量 , 或 者 
非 等 量 相 加 所 产生 的 颜色 。 























其 中 . 每 两 种 不 同 量度 相 加 所 产生 的 颜色 . 如 
下 表 所 述 。 


RGB 两 原色 等 量 混合 公式 : 
及 ( 红 ) 十 G( 绿 ) 生成 Y( 黄 ) (R=G) 
G ( 绿 ) 十 B ( 蓝 ) 生成 C ( 青 ) (G=B) 
B( 蓝 ) 十 R( 红 ) 生成 M (洋红 ) (B=R) 
RGB 两 原色 非 等 量 混合 公式 : 

及 (〈 红 ) 十 G( 绿 | 减弱 ) 生成 Y 一 R( 黄 偏 红 ) 
红 与 绿 合成 黄色 ， 当 绿色 减弱 时 黄 偏 红 































混合 公式 
RR( 红 | 减弱 ) 十 G ( 绿 ) 生成 Y 一 G( 黄 偏 绿 ) 
红 与 绿 合成 黄色 ， 当 红色 减弱 时 黄 偏 绿 





G ( 绿 ) 十 B ( 蓝 | 减 弱 ) 生成 C 一 G ( 青 偏 绿 ) 
绿 与 蓝 合成 青色 ， 当 蓝 色 减弱 时 青 偏 绿 
G ( 绿 | 减 弱 ) 十 B ( 蓝 ) 生成 C 一 B ( 青 偏 蓝 ) 
绿 和 蓝 合成 青色 ， 当 绿色 减弱 时 青 偏 蓝 





B ( 蓝 ) 十 R〈 红 | 减弱 ) 生成 M 一 B( 品 红 | 
偏 蓝 ) 

蓝 和 红 合成 品 红 ， 当 红色 减弱 时 品 红 偏 蓝 
B( 蓝 | 减弱 ) 十 R( 红 ) 生成 MR ( 品 红 
偏 红 ) 

蓝 和 红 合成 品 红 ， 当 蓝 色 减 弱 时 品 红 偏 红 





对 RGB 三 基色 各 进行 8 位 编码 ， 这 三 种 基色 
中 的 每 一 种 都 有 一 个 从 0 ( 黑 ) ~255 (白色 ) 的 亮 
度 值 范围 。 当 不 同 亮度 的 基色 混合 后 , 便 会 产生 出 
256 x 256 x 256 种 颜色 约 为 1670 万 种 ， 这 就 是 
我 们 常 说 的 “ 真 彩色 ”。 电 视 机 和 计算 机 的 显示 器 
都 是 基于 RGB 颜色 模式 来 创建 颜色 的 。 
2. CMYK 颜色 模式 

CMYK 颜色 模式 是 一 种 印刷 模式 。 其 中 ，4 
个 字母 分 别 指 青 (Cyan)、 洋 红 (Magenta) 、 黄 
(Yellow)、 黑 (Black) ， 在 印刷 中 代表 4 种 颜色 的 
油墨 。CMYK 基于 减 色 模式 ， 由 光线 照 到 有 不 同 
比例 C、M、Y、K 油墨 的 纸 上 ， 部 分 光谱 被 吸收 
后 . 反射 到 人 眼 的 光 产 生 颜色 。 在 混合 成 色 时 , 随 
着 C、M、Y、K 4 种 成 分 的 增多 ,反射 到 人 有 眼 的 
光 会 越 来 越 少 ， 光 线 的 亮度 会 越 来 越 低 。 






































3. HSB 颜色 模式 

色泽 (Hue)、 饱 和 度 (Saturation) 和 明亮 度 
(Brightness) 也 许 更 合适 人 们 的 习惯 ., 它 不 是 将 色 
彩 数字 化 成 不 同 的 数值 ， 而 是 基于 人 对 颜色 的 感 
觉 ， 让 人 觉得 更 加 直观 一 些 。 其 中 色泽 (Hue) 是 
基于 从 某 个 物体 反射 回 的 光波 , 或 者 是 透射 过 某 个 
物体 的 光波 : 饱和 度 (Saturation) ， 经 常 也 称 作 
chroma, 是 某 种 颜色 中 所 含 灰色 的 数量 多 少 . 含 灰 
色 越 多 ， 饱 和 度 越 小 ， 明 亮度 (Brightness) 是 对 
一 个 颜色 中 光 的 强度 的 衡量 。 明 亮度 越 大 , 则 色彩 
越 鲜艳 。 











亮度 100% 





亮度 0% 


在 HSB 模式 中 ， 所 有 的 颜色 都 用 色相 、 饱 
和 度 、 亮 度 三 个 特性 来 描述 。 它 可 由 底 与 底 
对 接 的 两 个 圆锥 体形 象 的 立体 模型 来 表示 。 


其 中 轴 向 表示 亮度 ， 自 上 而 下 由 白 变 黑 ; 径 
向 表示 色 饱 和 度 ， 自 内 向 外 逐渐 变 高 ; 而 圆 
周 方向 ， 则 表示 色调 的 变化 ， 形 成 色 环 。 





4. Lab 颜色 模式 

Lab 色彩 模式 是 以 数学 方式 来 表示 颜色 . 所 以 
不 依赖 于 特定 的 设备 . 这 样 确保 输出 设备 经 校正 后 
所 代表 的 颜色 能 保持 其 一 致 性 。 其 中 工 指 的 是 亮 
度 : a 是 由 绿 至 红 : b 是 由 蓝 至 黄 



































1 章 网 页 设 


计 基 础 


1.4.3” 自 定义 网 页 颜色 


一 般 情况 下 ,访问 者 的 浏览 器 Netscape 
Navigator 和 Internet Explorer 选择 了 网 页 的 文本 和 
背景 的 颜色 , 让 所 有 的 网 页 都 显示 这 样 的 颜色 。 但 
是 , 网 页 的 设计 者 经 常 为 了 视觉 效果 而 选择 了 自 定 
义 颜色 。 自 定义 颜色 是 一 些 为 背景 和 文本 选取 的 颜 
色 , 它们 不 影响 图 片 或 者 图 片 背 景 的 颜色 , 图片 一 
般 都 以 它们 自身 的 颜色 显示 。 自 定义 颜色 可 以 为 下 
列 网 页 元 素 独 自分 配 颜 色 。 

口 背景 网 页 的 整个 背景 区 域 可 以 是 一 种 
纯粹 的 自 定义 颜色 。 背 景色 总 是 在 网 页 的 
文本 或 者 图 片 的 后 面 。 

口 普通 文本 网 页 中 除了 链接 之 外 的 所 有 
文本 。 

口 级 链接 文本 ”网 页 中 的 所 有 文本 链接 。 

口 已 被 访问 过 的 链接 文本 ”访问 者 已 经 在 
浏览 器 中 使 用 过 的 链接 。 访问 过 的 文本 链 
接 以 不 同 的 颜色 显示 。 

口 当前 链接 文本 ” 当 一 个 链接 被 访问 者 单 
击 的 肯 间 ， 它 转换 了 颜色 以 表明 它 已 经 被 
激活 了 。 

制作 网 页 的 初学 者 可 能 更 习惯 于 使 用 一 
亮 的 图 片 作为 自己 网 页 的 背景 . 但 是 , 浏览 
型 的 商业 网 站 oa 
蓝 色 、 黄 色 等 ， 使 得 网 页 显得 典雅 、 人 
如 下 图 所 示 的 网 页 中 , 主要 由 白色 背景 和 蓝 色 、 黄 
色 、 粉红 色 以 及 黑色 笔触 组 成 . 能 够 加 快 浏览 者 打 
开 网 页 的 速度 。 

一 般 来 说 , 网 页 的 背景 色 应 该 柔和 一 些 、 素 一 
些 . 淡 一 些 . 再 配 上 深 色 的 文字 . 使 人 看 起 来 自然 、 
舒畅 。 而 为 了 追求 醒目 的 视觉 效果 , 可 以 为 标题 使 
用 较 深 的 颜色 。 其 中 . 一 些 经 常用 到 的 网 页 背景 部 
色 列表 ， 如 下 表 所 述 。 







































: :网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 








颜色 图 标 








十 六 进 制 值 
三 1FAFA 
#ESFFES 
#ESESFF 
#8080CO 


#E8D098 


#EFEFDA 


#2F1D7 
#336699 


#6699CC 


#66CCCC 


#B45B3E 


文字 色彩 搭配 
做 正文 的 背景 色 好 ， 淡 
雅 
做 标题 的 背景 色 较 好 
做 正文 的 背景 色 较 好 ， 
文字 颜色 配 黑色 
上 配 黄色 白色 文字 较 好 
上 配 浅 蓝 色 或 蓝 色 文 
字 较 好 
上 配 浅 蓝 色 或 红色 文 
字 较 好 
配 黑色 文字 素雅 ， 如 果 
是 红色 则 显得 醒目 
配 白色 文字 好 看 些 
配 白色 文字 好 看 些 ， 可 
以 做 标题 
配 白色 文字 好 看 些 ， 可 
以 做 标题 
配 白色 文字 好 看 些 ， 可 
以 做 标题 
配 白色 文字 好 看 些 ， 可 














旨 79AC7 | 个 标题 
p008271 | 配 白色 文字 好 看 些 ， 可 
以 做 标题 
DEREA | 配 黑色 文字 比较 好 看 ， 

一 般 作为 正文 
DSSR | 本 时 名 文 字 比 较 好 看 ， 
一 般 作为 正文 
WDEEE0 | 本 时 名 文字 比较 好 看 ， 
一 般 作为 正文 
WODAD | 配 黑 色 文 字 比 较 好 看 ， 
一 般 作 为 正文 
HDDE3EE | 配 黑色 文字 比较 好 看 ， 
一 般 作 为 正文 


此 表 只 是 起 一 个 “抛砖引玉 ”的 作用 . 大 家 可 
以 发 挥 想象 力 ， 搭 配 出 更 有 新 意 、 更 醒目 的 颜色 
使 网 页 更 具有 吸引 力 。 


1.4.4 色彩 推移 


色彩 推移 是 按照 一 定 规律 有 秩序 地 排列 . 组合 
色彩 的 一 种 方式 .为 了 使 画面 丰富 多 彩 、 变化 有 序 ， 
网 页 设计 师 通常 采用 色相 推移 、 明度 推移 纯度 推 
移 .互补 推移 .综合 推移 等 推移 方式 组 合 网 页 色彩 。 
1. 色相 推移 

选择 一 组 色彩 , 按 色相 环 的 顺序 . 由 冷 到 暖 或 
者 由 暖 到 冷 进行 排列 、 组 合 。 可 以 选用 纯色 系 或 者 
灰色 系 进行 色相 推移 。 
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2. 明度 推移 

选择 一 组 色彩 . 按 明度 等 差 级 数 的 顺序 . 由 浅 
到 深 或 者 由 深 到 浅 进行 排列 . 组 合 的 一 种 明度 渐变 
组 合 。 一般 都 选用 单 色 系列 组 合 。 也 可 以 选用 两 组 
色彩 的 明度 系列 按 明度 等 差 级 数 的 顺序 交叉 组 合 。 
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3. 纯度 推移 
选择 一 组 色彩 . 按 纯度 等 差 级 数 或 者 比 差 级 数 
的 顺序 . 由 纯色 到 灰色 或 者 由 灰色 到 纯色 进行 排列 


组 合 。 
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网 页 设计 属于 平面 设计 的 范畴 , 所 以 网 页 效果 
同样 包含 色彩 与 布局 这 两 种 元 素 。 网 页 设计 虽然 具 
有 其 自身 的 结构 布局 方式 . 但 是 平面 设计 中 的 构成 
原理 和 艺术 表现 形式 也 适用 于 网 页 设计 。 并 且 当 两 
者 成 功 结合 时 ， 制 作 的 网 页 才 会 受 浏览 者 喜爱 。 


1.5.1 网 页 形式 的 艺术 表现 


平面 构成 的 原理 已 经 广泛 应 用 于 不 同 的 设计 
领域 . 网 页 设计 也 不 例外 。 在 设计 网 页 时 . 平面 构 
成 原理 的 运用 能 够 使 网 页 效果 更 加 丰富 。 
1. 分 割 构成 

在 平面 构成 中 ， 把 整体 分 成 部 分 ， 叫 做 分 割 。 
在 日 常生 活 中 这 种 现象 随时 可 见 ， 如 房屋 的 吊顶 、 
地 板 都 构成 了 分 割 。 下 面 介 绍 几 种 常用 的 分 割 
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4. 综合 推移 

选择 一 组 或 者 多 组 色彩 按 色 相 、 明 度 、 纯 度 推 
移 进行 综合 排列 、 组 合 的 渐变 形式 , 由 于 色彩 三 要 
素 的 同时 加 入 . 其 效果 当然 要 比 单项 推移 复杂 . 丰 
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出 网 页 的 艺术 表现 与 风格 设计 


口 等 形 分 割 
该 分 割 方法 要 求 形状 完全 一 样 , 如 果 分 割 后 再 
把 分 割 界线 加 以 取舍 ,会 有 良好 的 效果 。 





口 自由 分 割 





该 分 割 方法 是 不 规则 的 . 将 画面 自由 分 割 的 方 
法 . 它 不 同 于 数学 规则 分 割 产 生 的 整齐 效果 . 但 它 
的 随意 性 分 割 ， 给 人 活泼 不 受 约束 的 感觉 。 



























口 比例 与 数列 
利用 比例 完成 的 构图 通常 具有 秩序 . 明朗 的 特 
性 , 给 人 清新 之 感 。 分 割 给予 一 定 的 法 则 , 如 黄金 


分 割 法 、 数 列 等 。 
pp Earth Hour | 9 
Yoo | 





2. 对称 构 成 

对 称 具有 较 强 的 秩序 感 。 可 是 仅仅 居于 上 下 、 
左右 或 者 反射 等 几 种 对 称 形式 ， 便 会 产生 单调 乏 
味 。 所 以 ， 在 设计 时 要 在 几 种 基本 形式 的 基础 上 
灵活 加 以 应 用 。 以 下 是 网 页 中 常用 的 几 种 基本 对 称 
形式 。 

口 左右 对 称 

左右 对 称 是 平面 构成 中 最 为 常见 的 对 称 方式 
该 方式 能 够 将 对 立 的 元 素平 衡 地 放置 在 同一 个 平 
面 中 。 如 下 图 所 示 , 为 某 网 站 的 进 站 首页 。 该 页 面 
通过 左右 对 称 结构 , 将 黑白 两 种 完全 不 同 的 色调 融 
入 同一 个 画面 。 














中 轴 对 称 布局 比较 简单 ,所 以 在 修饰 方面 也 要 
采用 简单 大 方 的 元 素 。 





口 回转 对 称 

回转 对 称 构 成 给 人 一 种 对 称 平衡 的 感觉 ,使 用 
该 方式 布局 网 页 , 打破 导航 菜单 一 贯 长 条 制作 的 方 
法 ,又 从 美学 角度 使 用 该 方法 平衡 页 面 。 














3. 平衡 构成 

在 造型 的 时 候 . 平衡 的 感觉 是 非常 重要 的 ， 
于 平衡 造成 的 视觉 满足 , 使 人 们 能 够 在 浏览 网 页 时 
产生 一 种 平衡 、 安 稳 的 感受 。 平衡 构成 一 般 分 为 两 
种 : 一 是 对 称 平衡 , 如 人、 蝴蝶 ,一些 以 中 轴线 为 
中 心 左右 对 称 的 形状 ; 另 一 种 是 非 对 称 平衡 , 虽然 
没有 中 轴线 ， 却 有 很 端正 的 平衡 美感 。 

口 对 称 平衡 

对 称 是 最 常见 、 最 自然 的 平衡 手段 。 在 网 
局 部 或 者 整体 采用 对 称 平衡 的 方式 进行 布局 . 
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得 到 视觉 上 的 平衡 效果 。 下 图 就 是 在 网 页 的 中 间 区 
域 采用 了 对 称 平衡 构成 ， 使 网 页 保持 了 平稳 的 
效果 。 














口 非 对 称 平衡 

非 对 称 其 实 并 不 是 真正 的 “不 对 称 ”， 而 
种 层次 更 高 的 “对 称 ”， 如 果 把 握 不 好 页 面 就 会 显 
得 乱 , 因此 使 用 起 来 要 慎重 ,更 不 可 用 得 过 滥 。 如 
下 图 所 示 , 通过 左上 角 浅 色 图 案 堆积 与 右 下 角 深 色 
填充 的 非 对 称 设计 ， 形 成 非 对 称 平衡 结构 。 








1.5.2 ”网 页 构成 的 艺术 表现 


重复 、 渐 变 以 及 空间 构成 都 是 色彩 构成 的 方 
式 . 它们 同样 也 适用 于 网 页 。 运用 这 些 形式 不 仅 可 
以 使 网 页 具有 充实 、 厚重 、 整体 . 稳定 的 视觉 效果 . 
而 且 能 够 丰富 网 页 的 视觉 效果 . 尤其 是 空间 构成 的 
运用 . 能 够 产生 三 维 的 空间 , 增强 网 页 的 深度 感 以 
及 立体 感 。 
1. 重复 构成 

重复 是 指 同一 画面 上 , 同样 的 造型 重复 出 现 的 
构成 方式 .重复 无 疑 会 加 深 印象 . 使 主题 得 以 强化 . 
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也 是 最 富 秩序 的 统一 观感 的 手法 。 在 网 站 构成 中 使 
用 重复 可 以 分 成 背景 和 图 像 两 种 形态 出 现 , 在 背景 
设计 中 就 是 形状 、 大 小 、 色 彩 、 肌 理 完全 重复 。 











2. 渐变 构成 

渐变 是 骨骼 或 者 基本 形 循序 渐进 的 变化 过 程 
中 , 呈现 出 阶段 性 秩序 的 构成 形成 , 反映 的 是 运动 
变化 的 规律 。 例 如 按 形状 、 大 小 、 方 向、 位 置 、 朴 
密 、 虚 实 、 色 彩 等 关系 进行 渐次 变化 排列 的 构成 








3. 空间 构成 

用 户 一 般 所 说 的 空间 , 是 指 的 二 维 空间 。 在 日 
常生 活 中 用 户 可 以 看 见 , 物体 在 空间 给 人 的 感觉 总 
是 近 大 远 小 ,例如 在 火车 站 ,月 人 台 上 的 柱子 近 的 高 、 
远 的 低 . 铁轨 是 近 的 宽 、 远 的 窄 . 对 这 些 特性 加 以 
研究 探索 . 分 析 立 体形 态 元 素 之 间 的 构成 法 则 . 提 
高 在 平面 中 创建 三 维 形态 的 能 力 。 

口 平行 线 的 方向 

改变 排列 平行 线 的 方向 ,会 产生 三 次 元 的 幻 
象 。 下 图 为 具有 空间 感 的 网 页 效果 。 





















REAL ESTATE DEVELOPMENT 





口 折 又 表现 


在 平面 上 一 个 形状 折叠 在 另 一 个 形状 之 上 .会 
有 前 后 、 上 下 的 感觉 ， 产 生 空 间 感 。 





口 阴影 表现 

阴影 的 区 分 会 使 物体 具有 立体 感觉 和 物体 的 
凹凸 感 。 如 下 图 所 示 , 为 通过 阴影 得 到 的 立方 体 效 
果 的 网 页 。 
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纹理 归根 结 底 是 色彩 。 它 是 网 页 的 重要 视觉 特 


1.5.3 











征 。 在 网 页 设计 时 . 使 用 不 同 的 纹理 . 配 以 适当 的 
内 容 . 能 够 让 浏览 者 记忆 深刻 ,尤其 当 运用 牛皮 纸 、 
木 纹 等 图 案 时 ， 使 得 在 网 页 中 具有 更 强 的 真实 感 。 
此 外 . 发 射 与 密集 构成 的 图 案 , 能 够 增强 网 页 的 空 
间 感 , 将 浏览 者 的 思维 转换 到 三 维 空间 , 充分 发 挥 
其 想象 力 。 
1. 肌理 构成 

肌理 又 称 质感 . 由 于 物体 的 材料 不 同 , 表面 的 
排列 . 组 织 、 构造 上 不 同 , 因而 产生 粗糙 感 、 光 滑 、 
软 硬 感 。 在 设计 中 . 为 达到 预期 的 设计 目的 , 强化 
心理 表现 和 更 新 视觉 效应 , 必须 研究 创造 更 新 更 美 
的 视觉 效果 。 

现代 计算 机 、 摄影 和 印刷 技术 的 发 展 更 加 扩大 
了 肌理 .材质 的 表现 性 ,成 为 现代 设计 的 重要 手段 。 
抽象 主义 和 其 他 现代 艺术 流派 创造 的 各 种 表现 技 
法 . 是 艺术 设计 师 必 须 研 习 的 课题 。 肌 理 即 形象 表 
面 的 纹理 特征 , 用 户 可 以 通过 多 种 方法 创建 不 同 的 
肌理 。 

口 纸 类 肌理 

各 种 不 同 的 纸张 , 由 于 加 工 的 材料 不 同 , 本 身 
在 粗细 、 纹 理 、 结 构 上 不 同 , 或 人 为 的 折 皱 ,揉搓 
产生 特殊 的 肌理 效果 。 

物体 表面 的 编排 样式 不 仅 反映 其 外 在 的 造型 
特征 , 还 反映 其 内 在 的 材质 属性 , 如 下 图 所 示 , 该 
网 页 以 布料 肌理 为 背景 。 



































口 利用 喷绘 

使 用 喷 笔 、 金 属 网 、 牙刷 将 溶解 的 颜料 刷 下 去 
后 . 颜料 如 雾 状 地 喷 在 纸 上 . 也 可 以 创造 出 个 性 的 
肌理 。 如 下 图 所 示 ， 为 毛笔 纹理 的 网 页 。 
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口 中 心 点 式 发 射 构成 

该 构成 方式 是 由 中 心 向 外 或 由 外 向 内 集中 地 
发 射 。 发 射 图 案 具 有 多 方 的 对 称 性 , 有 非常 强烈 的 
焦点 .而 焦点 易于 形成 视觉 中 心 ， 发 射 能 产生 视觉 
的 光 效 应 . 使 所 有 形象 有 如 光芒 从 中 心 向 四 面 散射 。 












































口 泻 3 

这 种 方法 是 在 具有 吸水 性 强 的 材料 表面 . 通过 
液体 颜料 进行 泻 染 .浸染 .颜料 会 在 表面 自然 散 开 . 
产生 自然 优美 的 肌理 效果 。 





它 是 以 旋 绕 的 排列 方式 进行 的 , 旋 绕 的 基本 形 
垃 溢 6 逐渐 扩大 形成 螺旋 式 的 发 射 。 


上 Es 
J 口 螺旋 式 发 射 


口 自然 界 元 素 

现在 网 站 设计 对 背景 的 重视 程度 越 来 越 高 . 因 
为 网 站 要 给 人 一 种 整体 效果 。 如 下 图 所 示 , 为 木 纹 
与 绿叶 肌理 形成 的 网 页 背景 。 








口 同心 式 发 射 
同心 式 发 射 是 以 一 个 焦点 为 中 心 . 层 层 环绕 发 
射 。 如 下 图 所 示 . 为 同心 式 发 射 网 页 背景 效果 。 























口 发 射 构成 

发 射 的 现象 在 自然 界 中 广泛 存在 ,太阳 的 光 
芒 、 盛 开 的 花 人 杂 、 贝 这 和 螺纹 和 蜘蛛 网 等 形成 发 射 
图 形 。 可 以 说 发 射 是 一 种 特殊 的 重复 和 渐变 . 其 基 
本 形 和 骨骼 线 均 环绕 着 一 个 或 者 几 个 中 心 .发 射 有 
强烈 的 视觉 效果 . 能 引起 视觉 上 的 错觉 . 形成 令 人 
及 目的 、 有 节奏 的 、 变 化 不 定 的 图 形 。 














2. 密集 构成 

密集 在 设计 中 是 一 种 常用 的 组 图 手法 . 基本 形 
在 整个 构图 中 可 自由 散布 、 有 朴 有 密 。 最 疏松 或 者 
最 紧密 的 地 方 常常 成 为 整个 设计 的 视觉 焦点 。 在 图 
面 中 造成 一 种 视觉 上 的 张力 . 向 磁场 一 样 . 具有 节 
奏 感 。 密 集 也 是 一 种 对 比 的 情况 . 利用 基本 形 数量 
排列 的 多 少 ， 产生 朴 密 、 虚 实 、 松 紧 的 对 比 效果 。 
如 下 图 所 示 ， 为 双色 圆 环 图 案 的 网 页 背景 。 



























































1.5.4 网 页 设计 风格 类 型 


随 着 审美 要 求 的 提高 , 网 页 视觉 效果 越 来 越 被 
重视 。 由 于 网 页 设计 隶属 于 平面 设计 . 所 以 平面 设 
计 中 的 绘画 风格 同样 能 够 应 用 于 网 页 设计 。 

1. 平面 风格 

平面 风格 是 通过 色 块 或 者 位 图 等 元 素 形成 二 

维 的 效果 ， 这 种 效果 最 常 出 现在 网 页 设计 中 。 








lam PayckMonkal Im a freetance graphic designer veg n The Nefherands Ths 
is he placelo check my graphio works oine. Feelfee lo contact me lyou Peve any 
questions or jstwant o 








2. 矢量 风格 





矢量 风格 的 网 页 是 通过 矢量 图 像 组 合 而 成 的 
这 种 风格 的 网 页 图 像 效果 可 以 任意 地 放大 与 缩 
小 ， 而 不 会 影响 查看 效果 .所 以 经 常 应 用 于 动画 网 





站 中 。 


3. 像素 风格 
像素 画 也 属于 点 阵 式 图 像 ， 
格 的 图 像 . 更 强调 清晰 的 轮廓 、 








但 它 是 一 种 图 标 风 
明快 的 色彩 ,几乎 





不 用 混合 方法 来 绘制 光滑 的 线条 .所 以 常常 采 
用 .gif 格式 ， 同 时 它 的 造型 比较 卡通 ， 得 到 很 多 朋 
友 的 喜爱 。 如 下 图 所 示 的 网 页 中 , 就 是 采用 像素 画 
与 真实 人 物 结合 的 方式 制作 而 成 的 











4. 三 维 风格 
三 维 是 指 在 平面 二 维系 中 又 加 入 了 一 个 方向 





向 量 构成 的 空间 系 。 三 维 风格 





的 三 维 空间 效果 ， 


在 网 页 中 的 运用 .能够 使 其 效果 无 限 延 伸 。 
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则 能 够 在 显示 立体 空间 的 同时 突出 其 主题 。 








而 三 维 风格 中 的 三 维 对 象 ， 在 网 页 中 的 应 用 ， 一 








[el EGG 


在 设计 网 页 时 ， 如果 只 是 单纯 地 用 线条 和 文字 制作 ， 则 整个 页 面 会 显得 过 于 单调 。 此 时 ， 用户 可 通 
过 为 网 页 插入 图 像 的 方法 ， 来 增加 网 页 的 丰富 多 彩 性 。 对 于 网 页 中 的 图 像 ， 一 般 使 用 Photoshop 软件 对 
其 进行 处 理 。 而 最 新 的 Photoshop CC 2015 中 文 版 是 Adobe 公司 开发 的 数字 图 像 编辑 软件 ， 是 目前 最 流 
行 的 图 像 处 理 软件 之 一 。 它 具有 强大 的 图 像 编辑 、 制 作 、 处 理 功能 ,操作 简 便 实 用 ， 备 受 各 行 各 业 的 青 
睐 .广泛 应 用 于 平面 设计 、 数 码 照片 处 理 、 广 告 摄影 、 网 页 设计 等 领域 。 本 章 主要 介绍 网 页 可 用 的 图 像 
类 型 、 设置 图 像 和 画布 、 选取 区 域 的 使 用 方法 . 以 及 添加 设置 图 层 等 基础 内 容 . 使 读者 能 够 在 Photoshop 
中 为 网 页 设计 所 需 的 图 像 。 








第 2 章 网 页 图 像 设计 基础 








Photoshop CC 2015 简介 





了 Photoshop 软件 作为 专业 的 图 像 编辑 工具 .可 
以 制作 适用 于 打印 .Web 和 其 他 任何 用 途 的 最 佳品 
质 的 图 像 。 而 这 些 图 像 都 可 以 通过 Photoshop 中 的 
各 种 工具 与 命令 来 完成 ， 下 面 介绍 Photoshop CC 
2015 的 基本 功能 、 新 增 功能 以 及 窗口 界面 。 


2.1.1 Photoshop 基本 功能 


了 Photoshop 以 其 强大 的 位 图 编辑 功能 、 灵 活 的 
操作 界面 、 开 发 式 的 结构 , 早已 渗透 到 图 像 设计 的 
各 个 领域 。 除 此 之 外 ，Photoshop 支持 几乎 所 有 的 
图 像 格式 和 色彩 模式 , 能 够 同时 处 理 多 图 层 。 其 强 
大 的 图 像 变 形 功能 、 调 色 功能 、 自 动 化 操作 ， 以 及 
便捷 的 图 像 选 取 和 绘画 等 功能 深 受 用 户 青睐 。 

1. 图 层 功能 

对 Photoshop 的 图 层 有 效 地 管理 , 可 以 为 图 像 
制作 提供 极 大 的 方便 。 对 于 不 同 的 元 素 . 用 户 可 以 
将 其 分 配 到 不 同 的 图 层 中 , 这 样 对 单个 元 素 进行 修 
改 时 不 会 影响 到 其 他 元 素 。 例 如 对 图 层 进行 合并 、 
合成 、 翻 转 、 复 制 和 移动 等 操作 : 局 部 或 者 全 部 使 
用 特殊 效果 ; 在 不 影响 图 像 的 同时 . 使 用 调整 图 层 
功能 控制 图 层 的 色相 、 渐 变 和 透明 度 等 属性 。 
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2. 绘画 功能 
Photoshop 作为 一 款 专业 的 图 像 处 理 软件 . 
绘画 功能 非常 强大 。 通 常情 况 下 ， 在 空 ee 





通过 使 用 【钢笔 工具 】[ 肪 ]、[【 画 笔 工具 】[O、[【 铅 
笔 工 具 】[ 忆 ]、【 自 定形 状 工具 】[ 愿 ] 可 以 直接 绘制 
图 形 . 使 用 文字 工具 可 以 在 图 像 中 添加 文本 . 或 者 
进行 不 同形 式 的 文本 编排 . 如 下 图 所 示 为 使 用 【 钢 
笔 工 具 】[ 东 ]、[【 画 笔 工 具 】[O 与 填充 工具 等 绘制 
出 来 的 精 绘图 像 。 














3. 选取 功能 
使 用 Photoshop 中 的 规则 选取 工具 、 不 规则 选 
取 工 具 与 选取 命令 等 , 可 以 选择 不 同形 状 、 不 同 尺 


十 选区， 以 及 对 选区 进行 移动 、 增 减 、 变 形 、 载 入 
和 保存 等 操作 。 如 下 图 所 示 ， 为 通过 通道 选取 的 
花卉 。 
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2 
4. 调 色 功能 


Photoshop 中 的 各 种 颜色 调整 命令 ， 可 以 根据 
不 同 的 要 求 . 或 者 设置 色彩 命令 中 的 不 同 选 项 , 调 
整 不 同 效果 的 图 像 , 例如 将 一 幅 图 像 的 色调 转换 为 
另 一 种 色调 .或 者 是 局 部 更 改 颜色 等 .如 下 图 所 示 ， 
转换 整 幅 图 像 的 色调 。 
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5 变形 功能 








使 用 【自由 变换 】 命 令 . 可 以 将 图 像 按 固定 方 
向 进行 翻转 和 旋转 ， 也 可 以 按 不 同 角度 进行 旋转 ，. 
或 者 对 图 像 进行 拉 伸 、 倾 斜 与 自由 变形 等 处 理 。 如 
下 图 所 示 ， 是 利用 变形 功能 调整 后 的 效果 。 
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2.1.2 ”Photoshop CC 2015 新 增 
功能 

Adobe 公司 推出 的 Photoshop 软件 是 目前 图 像 
处 理 界 中 最 受 青睐 的 产品 . 继 2014 年 出 Photoshop 
CC 2014、 之 后 ，Adobe 于 2015 年 再 度 发 布 了 
Photoshop CC 2015 版 本 。 相 比 于 此 前 的 众多 版 本 . 
Photoshop CC 2015 的 改版 力度 之 大 前 所 未 有 ， 
包括 多 画板 支持 、 新 设计 空间 、 去 雾 工具 等 新 
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1 多 画板 支持 

随 着 App 设计 的 极速 发 展 ， 固 定 的 屏幕 尺寸 
远 远 无 法 满足 设计 师 保存 多 个 PSD 以 适应 不 同 屏 
幕 尺寸 的 需求 了 。 而 Photoshop CC 2015 中 新 增 的 
多 面板 支持 新 功能 ， 便 可 以 完美 解决 设计 师 的 需 
求 。 相 对 于 旧版 本 中 保存 多 个 尺寸 的 PSD 来 讲 ， 
新 的 多 画板 功能 可 以 使 用 多 个 不 同 的 画板 将 原本 
多 个 尺寸 的 PSD 保存 为 一 个 PSD。 

对 于 多 画板 支持 新 功能 来 讲 ， 用 户 只 需 执 
行 【新 建 】| 【文件 】 命 令 ， 在 弹出 的 对 话 框 中 ， 
将 【文件 类 型 】 设 置 为 【画板 】 单 击 【确定 】 按 
钮 即 可 。 
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2. 新 设计 模式 : PS 设计 空间 

新 设计 的 PS 设计 空间 , 是 Adobe 面向 网 页 设 
计 、UX、App 设计 的 一 次 尝试 ， 它 只 是 一 个 预览 
版 .目前 仅 支持 Mac OS X 10.10.64 位 Windows 8.1 
或 更 高 版 本 的 操作 系统 。 该 设计 空间 拥有 一 个 UI 
设计 的 专属 操作 界面 ， 包 括 标准 接口 和 代替 
HTML5/CSS/JS 的 图 层 等 内 容 。 

如 需 使 用 该 功能 ,用户 可 执行 【编辑 】| 【 首 
选项 】| 【技术 预览 】 命 令 ， 启 用 【启用 设计 空间 
(预览 )】 复 选 框 ， 并 单 击 【 确 定 】 按 钮 。 

此 时 . 系统 将 自动 切换 到 设计 空间 界面 中 . 并 
显示 英文 状态 下 的 操作 命令 和 操作 工具 。 















































3. Adobe 图 库 

无 论 是 独立 的 设计 师 还 是 大 型 的 设计 结构 .图 
库 对 其 来 讲 都 是 必需 品 。Photoshop CC 2015 中 的 
Adobe 图 库 作为 在 线 服务 再 次 回归 , 以 解决 使 用 者 
对 图 库 的 需求 。 目前, Adobe 拥有 多 达 4 千 万 图 片 

















的 素材 库 ， 用 户 可 将 Adobe 图 库 中 漂亮 的 图 片 通 
过 创意 云 导入 一 个 低 分 辩 率 带 水 印 的 版 本 , 并 可 以 
通过 直接 调用 这 些 图 片 . 来 设计 网 页 和 APP。 而 当 
用 户 使 用 这 些 图 片 确定 了 网 页 和 APP 的 设计 方案 
之 后 , 便 可 以 再 以 内 购 的 方式 来 购买 高 清 无 码 版 本 
的 图 片 素材 。 
4. 新 增 “ 导 出 ”功能 

了 Photoshop CC 2015 中 新 增 的 “导出 ”功能 替 
代 了 旧版 本 中 的 “存储 为 Web 所 用 格式 ”功能 . 
其 “导出 ”功能 可 使 用 户 针对 特定 的 图 层 和 画板 进 
行 导出 , 导出 格式 可 以 是 JPEG. GIF. PNG. PNG-8 
和 SVG (可 缩放 矢量 图 形 )。 在 Photoshop CC 2015 
中 ,用户 只 需 执行 【文件 】|【 导 出 】 命 令 . 在 其 
级 联 菜单 中 选择 相应 的 导出 选项 即 可 。 
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5. 移动 设备 的 实时 预览 

Photoshop CC 2015 新 增加 了 移动 设备 的 实时 
预览 功能 ,可 以 在 IOS 设备 上 实时 预览 App 设计 
效果 。 目 前 为 止 , 该 功能 只 支持 IOS 8 或 更 高 版 本 ， 
并 不 支持 Android 设备 。 
6. 更 多 PS 图 层 混 合 模式 效果 

了 Photoshop 旧版 本 中 只 能 使 用 一 种 PS 图 层 混 
合 模式 ， 而 在 Photoshop CC 2015 中 不 仅 可 以 针对 
图 层 和 分 组 添加 多 种 突出 混合 模式 , 而 且 还 可 以 调 
整 混合 模式 的 又 加 顺序 。 
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7. 模糊 画廊 的 改进 

Photoshop CC 2015 改进 了 模糊 画廊 功能 ， 在 
模糊 画廊 中 的 模糊 效果 中 新 增 了 不 少 淡色 和 彩色 
噪点 . 从 而 杜绝 了 旧版 本 中 模糊 滤 镜 中 所 出 现 的 不 
够 自然 的 感觉 。 






































8. 字符 面板 中 更 容易 找到 字形 
Photoshop CC 2015 版 本 中 新 增 字 形 面板 ， 通 
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过 该 面板 可 以 查找 到 用 户 所 需要 的 字符 字形 . 而 
无 需 再 通过 电脑 字符 查看 器 来 查找 一 些 特殊 字 






















































































9. 去 雾 功 能 

Photoshop CC 2015 内 置 了 Adobe Camera Raw 
9.1， 从 而 新 增 了 一 个 去 雾 功能 。 用 户 可 通过 调整 
滑 块 , 来 减少 或 增加 照片 的 雾 替 : 或 者 通过 手动 调 
整 各 项 参数 ， 对 图 片 进行 更 加 精确 的 调整 。 
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10. 大 量 3D 功能 的 改进 

Photoshop CC 2015 针对 3D 打印 功能 进行 了 
大 量 的 改进 , 用 户 不 仅 可 以 将 3D 模型 导出 为 SVX 
或 PDF 文件 ， 而 且 还 可 以 简化 网 格 ， 以 及 调整 凹 
凸 贴图 的 最 大 和 最 小 深度 。 

除 此 之 外 .Photoshop CC 2015 对 3D 图 形 的 功 
能 也 进行 了 不 少 的 改进 。 其 中 . 最 为 醒目 的 一 点 便 
是 增加 了 新 的 3D 简化 网 络 功 能 . 以 用 于 合理 减少 
网 格 中 三 角形 的 数量 。 
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另外 ， 在 Photoshop CC 2015 中 ， 还 改进 了 下 
列 3D 图 形 功 能 。 
口 改进 导出 属性 用 户 界面 。 
可 以 导出 单一 的 网 格 ， 而 不 是 整个 场景 。 
口 可 通过 新 凹凸 /普通 地 图 滤 镜 来 调整 凹凸 
贴图 。 
口 可 以 从 四 散 的 纹理 中 创建 凹凸 贴图 。 
口 可 以 在 PLY 文件 中 将 顶点 颜色 转换 为 纹 
理 颜 色 。 


口 


除了 上 述 所 介绍 的 10 种 新 增 功能 之 外 ， 


Photoshop CC 2015 还 新 增 了 实时 修复 预览 
效果 、 改 进 内 容 感 知 移动 工具 、 改 进 内 容 感 
知 填充 工具 、 调 整 层 组 织 等 新 功能 。 


2.1.3 ”Photoshop 窗口 界面 


Photoshop CC 2015 中 全 新 的 界面 操作 方式 ， 
与 以 往 版 本 工作 界面 所 不 同 的 是 . 新 版 本 在 工具 条 
与 面板 布局 上 引入 了 全 新 的 可 伸缩 的 组 合 方式 , 使 
编辑 操作 更 加 方便 、 快 捷 。 
1. Photoshop 工作 界面 

启动 Photoshop CC 2015， 工 作 界面 中 的 工具 
箱 . 工作 区 域 与 控制 面板 有 其 固定 的 位 置 ,当然 三 
者 也 可 以 成 为 浮动 面板 或 者 浮动 窗口 。 
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其 中 , 工作 界面 中 主要 的 组 成 部 分 如 下 表 所 示 。 


区 域 


工具 





简 介 
工具 箱 中 列 出 了 Photoshop 中 常用 的 工 
具 ， 单 击 工具 按钮 或 者 选择 工具 快捷 键 即 
可 使 用 这 些 工 具 。 对 于 存在 子 工具 的 工具 
组 (在 工具 右 下 角 有 一 个 小 三 角 标 志 说 明 
该 工具 中 有 子 工具 ) 来 说 ， 只 要 在 图 标 上 
右 击 或 按 住 鼠标 左 键 不 放 ， 就 可 以 显示 出 
该 工具 组 中 的 所 有 工具 
Photoshop 的 菜单 栏 中 包括 9 个 菜单 ， 分 
别 是 【文件 【编辑 】 【图像 》 【图 层 】、 
【选择 】【 滤 镜 】【 视 图】 【窗口 】 和 【 必 
助 〗。 使 用 这 些 菜单 中 的 菜单 选项 可 以 执 
行 大 部 分 Photoshop 中 的 操作 
面板 控制 面板 的 功能 很 全 面 ， 主 要 用 于 基 
本 操作 的 控制 和 进行 参数 的 设置 。 在 面板 
上 右 击 有 时 还 可 以 打开 一 些 快捷 菜单 进 
行 操作 





选项 栏 是 从 Photoshop 6.0 版 本 开始 出 现 
的 ， 用 于 设置 工具 箱 中 当前 工具 的 参数 。 
不 同 的 工具 所 对 应 的 工具 栏 也 有 所 不 同 





标题 栏 位 于 窗口 的 顶端 ， 左 侧 显示 Adobe 
Photoshop 图 标 和 字样 ， 右 侧 有 程序 窗口 
控制 按钮 ， 从 左 到 右 依次 是 【最 小 化 】 按 
钮 一 卜 【 最 大 化 〗】 按 钮 加 | 【关闭 】 按 钮 

X |， 这 三 个 按钮 是 Windows 窗口 共 
有 的 





在 打开 一 幅 图 像 的 时 候 就 会 出 现 图 像 窗 


口 ， 它 是 显示 和 编辑 图 像 的 区 域 
状态 栏 中 显示 的 是 当前 操作 的 提示 和 当 
前 图 像 的 相关 信息 


2. 工具 箱 

工具 箱 是 每 一 个 设计 者 在 编辑 图 像 过 程 中 必 
不 可 缺少 的 ,工具 箱 在 Photoshop 界面 的 左 侧 ， 当 
单 击 并 且 拖 动工 具 箱 时 ， 该 工具 箱 成 半 透明 状 。 

另外 ,工具 箱 中 的 每 一 个 工具 都 具有 相应 的 选 
项 参数 , 激活 某 个 工具 后 , 该 工具 相应 的 选项 参数 
显示 在 工具 选项 栏 中 , 用 户 可 根据 需要 随时 对 选项 
或 参数 设置 进行 调整 
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其 中 .工具 箱 中 所 有 工具 的 名 称 、 快 捷 键 以 及 功能 介绍 , 如 下 表 所 述 。 
































图 标 工具 名 称 快捷 键 工具 功能 介绍 
[+] | 移动 工具 V 移动 图 层 和 选区 内 图 像 像素 
珑 形 选 框 工 具 M 创建 矩形 或 者 正方 形 选区 
椭圆 形 选 框 工具 M 创建 椭圆 或 者 正 圆 选 区 
单行 选 框 工具 元 创建 水 平 1 像素 选区 
单列 选 框 工 具 于 创建 重 直 1 像素 选区 
套 索 工具 十 根据 拖 动 路 径 创建 不 规则 选区 
多 边 形 套 索 工具 本 连续 单 击 创建 直 边 多 边 形 选 区 
磁性 套 索 工具 到 根据 图 像 边 缘 颜 色 创 建 选区 
魔 棒 工 具 Ww 创建 与 单 击 点 像素 色彩 相同 或 者 近似 的 连续 或 者 非 连 续 的 选区 
快速 进 树 工具 要 利用 可 调整 的 圆 形 画笔 笔 类 快速 “绘制 ”选区 。 拖 动 时 ， 选 区 会 





修复 画笔 工具 





回 |aaa | ec 
| | e | 
wz |] ec 
| [amafz Te | 
ar | 1 | 
Co ET [1 | 
司 [meat | | 
加 |xzk | 1 
国 |afzA | 1 
加 [aas | | 
区 
[wj 
加 


(ehoedledllle 


[5] | 内 容 感知 移动 工具 


回 ET 
] | 画笔 工 | B | 根据 参数 设置 绘制 多 种 笔 甬 的 直线 、 曲 线 和 沿路 径 描 边 


向 外 扩展 并 自动 查找 和 跟随 图 像 中 定义 的 边缘 

载 切 多 余 图 像 边缘 ， 也 可 以 校正 图 像 

可 以 透视 变形 图 像 

将 图 像 分 隔 成 多 个 区 域 ， 方 便 成 组 按 编 号 输出 网 页 图 像 

选取 图 像 中 已 分 隔 的 切片 图 像 

采集 图 像 中 颜色 为 前 景色 

采集 3D 对 象 中 的 材质 属性 

结合 【信息 】〗】 面 板 查看 图 像 内 颜色 参数 

结合 【信息 〗 面 板 测 蚤 两 点 之 间 的 距离 和 角度 

为 文字 添加 注释 

用 作 度 量 图 像 的 长 、 宽 、 高 、 起 点 坐标 、 终 点 坐标 、 角 度 等 数据 
对 图 像 中 的 污点 进行 修复 

对 图 像 的 细节 进行 修复 

用 图 像 的 某 个 区 域 进 行 修补 

可 在 无 需 复 杂 图 层 或 慢 速 精确 的 选择 选区 的 情况 下 快速 地 重 构 
图 像 











7 
加 
[2] | 设置 笔 角 大小， 绘制 硬 边 直 线 、 曲 线 和 沿路 径 描 边 
加 
回 
四 











魔术 橡皮 擦 工具 


擦 除 设 定 容 差 内 的 颜色 ， 相 当 于 魔 棒 十 Del 键 的 功能 








渐变 工具 








填充 渐变 颜色 ， 有 5 种 渐变 类 型 


有 世间 术 工 页 对 国人 局 部 颜色 进行 亲近 
混合 器 画笔 工具 B 将 照片 图 像 制 作成 绘画 作品 
ET 按 Alt 键 定义 复制 区 域 后 可 以 在 图 像 内 克隆 国 像 ， 并 可 以 设置 泥 
ale S | 公 模 式 、 不 迁 明 度 和 对 齐 方式 的 参数 
辕 案 图 训 工具 S | 利用 Photoshop 预 设 图 像 或 者 用 户 自 定义 国 案 绘制 国 像 
历史 记录 画笔 工具 Y 以 历史 的 某 一 状态 绘图 
历 丈 记录 艺术 画笔 “| YY | 用 艺术 的 方式 恢复 国信 
乏 皮 擦 工具 EE ”| 掠 除 回信 
背景 标 度 擦 工具 EE ”| 凉 除 图 像 电 示 背 妇 
E 
G 








网 页 图 像 设 计 基 础 
































续 表 
图 标 工具 功能 介绍 
[多] | 油漆 桶 工具 填充 前 景色 或 者 图 案 
区 | 3D 材质 拖 放 工具 填充 材质 至 3D 对 象 中 
[6」 | 模糊 工具 模糊 图 像 内 相 邻 像素 颜色 
[A] | 锐 化 工具 锐 化 图 像 内 相 邻 像素 颜色 
[多 | 涂抹 工具 以 涂抹 的 方式 修饰 图 像 
[a 使 图 像 局 部 像素 变 亮 
| 使 图 像 局 部 像素 变 暗 
加 调整 图 像 局 部 像素 饱和 度 
加 绘制 路 径 
[人 B] | 自由 钢笔 工具 | P | 以 自由 手绘 方式 创建 路 径 
天 在 忆 有 政权 上 开 加 节点 
加 出 除 政 反 和亲 个 节点 
四 转换 节点 类 型 ， 例如 可 以 将 直线 节点 转换 为 曲线 节点 进行 路 径 调整 
贺 输入 编辑 械 排 文字 
国 答 入 抽样 有 让 文字 

















直接 创建 模 排 文 字 选 区 
去 术 创建 对 直 文 守 这 芭 
过 并 路径 枚 生 纺 办 作 
选择 路 径 或 者 部 分 节点 调整 路 径 














加 UU | 绘制 答 形 形 状 或 者 矩形 路 径 

吕 绘制 贺 角 矩形 形状 或 者 路 径 

加 可 | 绘制 梢 团 、 正 加 形状 或 者 路 径 

[@. 绘制 任意 多 边 形 形 状 或 者 路 径 

加 公制 直线 和 条 大 

器 绘制 自 定义 形状 和 自 定义 路 径 

加 | 本 TR ”| HH | 移动 国信 帘 口 区 基 

| 袖 国 并 畦 T 具 ”| RR | 次 村 视 国 里 示 方向 

加 放大 或 者 缩小 图 像 显示 比例 
| 设置 前 景色 和 背景 色 ， 按 D 键 恢复 为 默认 值 ， 按 X 键 切 换 前 景 

[ 面 | 设置 前 寻 色 ， 背 录 色 | 无 i 

@] | 以 快速 莹 版 模式 编辑 | ”Q | 切换 至 快速 蒙 版 模式 编辑 

[中 ] | 更 改 屏 幕 模式 下 | 切换 拼 幕 的 显示 模式 





单 的 形式 集合 在 控制 面板 中 。 在 Photoshop CC 中 ， 











当选 中 一 个 工具 后 ， 想 在 该 工具 组 中 来 回 切 所 有 控制 面板 以 图 标 形式 显示 在 界面 右 侧 。 











和 旬 ， 使 用 快捷 键 Shift 十 该 工具 快捷 键 即 可 。 当 用 户 单 击 其 中 一 个 面板 图 标 后 . 该 面板 会 自 
动 展开 . 显示 其 内 容 。 而 当 用 户 打开 另外 一 个 面板 

















.控制 面板 组 中 的 面板 时 .系统 会 自动 显示 该 面板 组 .而 原来 


Photoshop 中 的 控制 面板 综合 了 Photoshop 编 





显示 的 面板 组 自动 缩小 为 图 标 。 














辑 


图 像 时 最 常用 的 命令 和 功能 . 以 按钮 和 快捷 键 菜 


















网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 


多 出 Photoshop 基本 操作 


在 Photoshop 中 ， 无论 是 绘制 图 像 ， 还 是 编辑 续 表 
图 像 . 最 基本 的 操作 方法 必须 首先 掌握 , 例如 打开 
或 者 保存 不 同 格式 的 图 像 文件 、 设置 图 像 大 小 、 调 
整 图 像 窗口 的 大 小 或 位 置 等 。 


2.2.1 文件 操作 


在 Photoshop 中 , 文件 管理 主要 包括 新 建 、 打 
开 及 存储 等 操作 。 
1. 新 建文 件 

在 Photoshop 中 , 执行 【文件 ] |【 新 建 】 命 令 . 
在 弹出 的 【新 建 】 对 话 框 中 ， 设 置 新 文件 的 大 小 、 
颜色 模式 以 及 背景 图 层 等 选项 ， 并 单 击 【确定 】 
按钮 。 

















在 下 拉 列 表 中 可 以 选择 【位 图 】【 灰 度 】、 
【RGB 颜色 】【CMYK 颜色 】 和 【Lab 颜 
色 】 等 多 种 颜色 模式 。 黑 认为 【RGB 颜色 】 
模式 。 在 颜色 后 面 可 以 选择 8 位 颜色 ， 也 
可 以 选择 16 位 颜色 ， 一 般 选 择 8 位 
设置 新 建 图 像 背 录 图 层 的 颜色 ， 有 三 个 选 
项 : 选择 【白色 】〗 时 ， 新 建文 件 背景 图 层 
为 白色 ; 选择 【背景 色 〗 时 ,新建 文件 背 
景 与 工具 箱 中 设置 的 背景 颜色 一 致 ; 选择 
【透明 】〗】 时 ， 则 新 建 一 个 完全 透明 的 普通 
图 层 文档 

可 以 选取 一 个 颜色 配置 文件 ， 或 选择 不 对 
文档 进行 色彩 管理 。 对 于 【像素 长 宽 比 】， 
除非 用 于 视频 图 像 ， 一 般 选 取 【〖【 方 形 】 
对 于 经 常 使 用 的 参数 设置 ， 可 以 单 击 该 按 








































































































名 称 (N): [示人 钮 存储 起 来 。 下 次 新 建文 件 时 , 可 以 从 【 预 
人 设 〗 下 拉 列 表 中 找到 上 次 存储 的 设置 
大 小 
帘 实 (W): | 483 
Ron 加 当 用 户 经 常 创建 同样 大 小 的 文档 时 ， 第 一 次 
分 辩 率 (R): |72 , 要 入 i 
a 创建 时 设置 好 各 选项 后 ， 在 第 二 次 新 建 时 ， 
Rs 按 快捷 键 CarHAltHN， 可 创建 与 第 一 次 设置 
背景 内 容 ; [ 运 明 加 图 像 大 小 : 
高 级 84.9K 完全 一 样 的 文档 。 
闫 色 配 置 文件 : [ 工作 中 
像素 长 宽 比 : 2. 保存 文件 
保存 文件 是 将 制作 好 的 文件 存储 到 计算 机 上 , 


以 避免 因为 停电 、 死 机 或 Photoshop 出 错 自动 关闭 
等 情况 所 导致 的 文件 丢失 的 情况 。 
执行 【文件 】| 【存储 】 或 【存储 为 】 命 令 ， 

在 弹出 的 【存储 为 】 对 话 框 中 . 设置 保存 位 置 、 保 
名 称 | ”新建 的 文件 命名 ， 如 果 不 输入 。 则 以 村。 存 名 称 和 保存 类 型 ， 单 击 【 保 存 】 按 钮 即 可 。 

认 名 “未 标题 1” 为 名 

在 下 拉 列 表 中 包括 了 二 系列 常用 Rdy 观 2.2.2 图 像 操 作 

格 的 空白 文档 模板 ， 例 如 ， 选 择 【 国 际 标 


【新 建 】 对 话 框 中 ， 各 选项 的 具体 功能 如 下 表 
所 述 。 























预 设 | 准 纸张 〗 先 项， 那么 新 建文 件 的 大 小 为 Photoshop 作为 一 种 流行 的 图 像 处 理 软 件 ， 在 
105X148mm。 如 果 选 返 【 自 定 〗， 可 以 自 图 像 处 理 方面 做 得 相当 出 色 。 但 是 初学 者 在 掌握 这 
hs 些 技能 之 前 ， 首 先 要 熟悉 Photoshop 的 基本 操作 








: 网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 : 








例如 设置 图 像 大 小 、 画 布 大 小 、 图像 的 复制 、 粘 贴 
和 清除 等 。 




















Nipa ~ 
保 大 [DLPEG CJPGPJPEG:JPE | 本 


Er Be 口 全 有 cs 有 CO) 工 
TE: DEBE op WK 
ND ucc EXO): 
RGB IEC61956-21 





Alpha BE) 
se® 
EU 





1. 设置 图 像 大 小 

执行 【图 像 】 | 【图 像 大 小 】 命 令 . 在 弹出 的 
【图 像 大 小 】 对 话 框 中 ,设置 各 项 选项 ， 单 击 【 确 
定 】 按 钮 即 可 。 








图 参 大 小 11.9M a. 
尺寸 [-] 2500 像素 x 1660 堡 于 
调整 为 [ 原初 大 小 
三 疯 RD [26.49 ][ 
上 高 度 (5) [17.57 
分 关于 (RN); 
思 重新 采样 (S): 

















| 急于 | 疯 本 

















[ 











在 【图 像 大 小 】 对 话 框 中 . 主要 包括 下 列 选项 。 

口 图 像 大 小 ”用 于 显示 图 像 的 原始 大 小 。 

口 尺寸 ”用 于 设置 图 像 像素 尺寸 的 度量 单 
位 ， 可 以 单 击 【尺寸 】 下 拉 按 钮 ， 从 下 拉 
列表 中 选择 相应 的 度量 单位 。 

口 调整 为 ”用 于 设置 调整 图 像 的 大 小 类 型 ， 
包括 原始 图 像 、 自 动 分 辨 率 、960x640 像 
素 144ppi 等 类 型 。 

口 宽度 和 高 度 用 于 指定 图 像 的 宽度 和 高 
度 值 ， 启 用 【约束 比例 】 选 项 可 保持 最 初 
的 宽 高 度量 比 。 

口 分 辨 它 ”用 于 设置 图 像 的 分 辩 率 ， 包 括 像 
素 / 尺 寸 和 像素 /厘米 两 种 方式 。 














第 2 章 ”网 页 图 像 设计 基础 





口 重新 采样 ” 重 定 图 像 像素 的 方式 。 
而 【重新 采样 】 选 项 中 . 又 包括 下 列 7 个 


口 自动 化 ”Photoshop 根据 文档 类 型 以 及 是 
放大 还 是 缩小 文档 来 选取 重新 取样 方法 。 
口 保留 细节 (扩大) ”选取 该 方法 ， 可 在 放 
大 图 像 时 使 用 【减少 杂 色 】 滑 块 消除 杂 色 ， 
在 放大 图 像 时 提供 更 优 锐 度 的 方法 。 
口 两 次 立方 〈 较 平滑 ) (扩大 ) ”一 种 基于 
两 次 立方 插值 且 旨 在 产生 更 平滑 效果 的 
有 效 图 像 放大 方法 。 
口 两 次 立方 〈 较 锐利 ) (缩小 ) ”一 种 基于 
两 次 立方 插值 且 具 有 增强 锐 化 效果 的 有 
效 图 像 减 小 方法 。 此 方法 在 重新 取样 后 的 
图 像 中 保留 细节 。 如果 使 用 【两 次 立方 ( 较 
锐利 )】〗 会 使 图 像 中 茶 些 区 域 的 锐 化 程度 
过 高 ， 可 以 尝试 使 用 【两 次 立方 〗。 
口 两 次 立方 (平滑 渐变 ) ”一 种 将 周转 像素 
值 分 析 作 为 依据 的 方法 ， 速 度 较 慢 ， 但 精 
度 较 高 。【〖 两 次 立方 〗 使 用 更 复杂 的 计算 ， 
产生 的 色调 渐变 比 【 邻 近 】 或 【两 次 线性 】 
更 为 平滑 。 
口 邻近 〈 硬 边缘 ) ”一 种 速度 快 但 精度 低 的 
图 像 像 素 模拟 方法 。 该 方法 会 在 包含 未 消 
除 锯齿 边缘 的 插图 中 保留 硬 边 缘 并 生成 
较 小 的 文件 。 但 是 ， 该 方法 可 能 产生 锯齿 
状 效果 ,在 对 图 像 进 行 扭 曲 或 缩放 时 或 在 
某 个 选区 上 执行 多 次 操作 时 ， 这 种 效果 会 
变 得 非常 明显 。 
口 两 次 线性 ”一 种 通过 平均 周围 像素 颜色 
值 来 添加 像素 的 方法 。 该 方法 可 生成 中 等 
品质 的 图 像 。 
2. 设置 画布 大 小 
对 于 平面 设计 工作 ,无 论 是 原来 的 手工 创作 . 
还 是 现代 的 电脑 数字 创作 ， 都 离 不 开 画 布 这 个 平 
合 。 在 手工 创作 时 ,创作 者 将 画布 平 铺 在 画板 上 : 
而 电脑 数字 创作 . 设置 了 一 个 虚拟 的 背景 层 来 作为 
画布 ,但 二 者 的 工作 方式 是 一 样 的 。 
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执行 【图 像 】| 【画布 大 小 】 命 令 . 在 弹出 的 “ 3. 复制 图 像 
【画布 大 小 】 对 话 框 中 设置 相应 选项 . 单 击 【 确 定 】 


按钮 即 可 。 





一 当前 大 小 : 11.9M 
宽度 : 26.46 厘米 
高 度 : 17.57 厘米 
一 新 汗 大 小 : 11.9M 一 一 一 一 一 一 一 一 
宽度 (W): [26.46 厘米 “= 
17.57 厘米 
相对 (8) 


























万 
| 
x 




















画布 扩展 颜色 :[ 背景 =][ 


该 对 话 框 中 , 无 论 是 扩大 缩小 画布 尺寸 . 不 仅 
可 以 绝对 或 相对 进行 尺寸 设置 . 还 可 以 自 定义 画布 





中 心 位 置 。 用 户 只 要 单 击 【定位 】 选 项 
钮 ， 即 可 得 到 不 同 的 效果 。 








的 箭头 按 








执行 【图 像 】|【 复 制 】 命 令 ， 在 弹出 的 【 复 





制图 像 】 对 话 框 中 输入 图 像 名 称 ， 单 





二 【确定 】 














用 户 也 可 以 选择 图 像 某 个 区 域 ， 使 用 组 合 键 
CtrltC 复制 图 像 区 域 ， 然 后 使 用 组 合 键 
Ctrl+V 粘贴 图 像 。 或 者 ， 使 用 组 合 键 Ctrl+X 
剪 切 图 像 区 域 ， 然 后 使 用 组 合 键 CtrlHV 粘 
贴图 像 。 





0 选取 区 域 与 绘制 





图 像 处 理 过程 中 ,需要 对 许多 图 形 进行 局 部 编 
辑 或 修改 ,这 时 图 像 的 选取 操作 就 显得 尤为 重要 。 
选取 范围 的 优 劣 性 、 准确 与 否 . 都 与 图 像 编辑 的 成 
败 有 着 密切 的 关系 。 因此. 在 最 短 时 间 内 进行 有 效 























jl 要 


. 为 以 后 的 图 像 处 理工 作 商定 基础 。 





、 精 确 的 范围 选取 . 能 够 提高 工作 效率 和 图 像 质 


2.3.1 使 用 选 框 工具 


Photoshop 中 的 选 框 工具 包括 【矩形 选 框 工具 】 


























纪 ]、【 椭 圆 选 框 工具 】[， 
【单列 选 框 工具 】 臣 J]。 这 4 种 工具 的 使 用 方法 很 简 





、【 单 行 选 框 工具 】 





as 


单 . 只 需 在 画面 中 单 击 并 拖 动 鼠标 拉 出 一 个 矩形 或 








椭圆 选 框 ， 松 开 鼠 标 即 可 创建 选区 。 
1. 和 矩 形 /椭圆 选 框 工具 

【和 矩 形 选 框 工具 】 ,是 Photoshop 中 最 常用 的 
选取 工具 。 选 择 工具 箱 中 的 【和 矩形 选 框 工 具 】[ 避 |. 
在 画布 上 面 单 击 并 拖 动 鼠标 ,绘制 出 一 个 矩形 
域 , 释放 鼠标 后 会 看 到 区 域 四 周 有 流 动 的 虚线 。 
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工具 选项 栏 中 包括 三 种 样式 : 正常 、 固定 比例 
和 固定 大 小 。 在 【正常 】 样 式 下 .可 以 创建 任何 尺 
十 的 矩形 选区 ,该 样式 也 是 【矩形 选 框 工具 】 的 默 
认 样 式 。 

选择 【和 矩形 选 框 工 具 】| 沁 后 ， 在 工具 选项 栏 
中 设置 【样式 】 为 【固定 比例 】. 其 默认 参数 值 【高 
宽 】 与 【宽度 】 为 1:1， 这 时 创建 的 选区 不 限制 尺 
寸 ， 但 是 其 宽度 与 高 度 相等 ， 为 一 个 正方 形 。 
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如 果 设置 【样式 】 为 【固定 大 小 】， 在 【宽度 】 
和 【高 度 】 文本 框 中 输入 所 要 创建 选区 的 尺寸 . 在 
画布 中 单 击 即 可 创建 固定 尺寸 的 矩形 选区 . 这 使 得 
选取 网 页 图 像 中 指定 大 小 的 区 域 非常 方便 。 
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【固定 比例 】 和 【固定 大 小 〗】 样 式 中 宽度 与 
高 度 之 间 的 双向 箭头 型 的 作用 是 交换 两 个 




















2. 椭圆 选 框 工具 

如 果 想 要 获取 网 页 图 像 中 圆 形 的 区 域 . 可 以 使 
用 【椭圆 选 框 工具 】|[ 司 。 其 创建 选区 的 方法 与 【和 矩 
形 选 框 工具 】[ 国 相同， 不 同 的 是 在 工具 选项 栏 中 
还 可 以 设置 椭圆 选区 的 【消除 锯齿 】 选 项 . 该 选项 
用 于 消除 曲线 边缘 的 马赛 克 效果 。 
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创建 矩形 或 者 椭圆 选区 时 ， 按 下 Shift 键 同 
时 单 击 并 且 拖 动 鼠 标 得 到 的 是 正方 形 或 者 
正 圆 选 区 ; 按 下 Alt 键 的 同时 ， 以 鼠标 单 击 
处 为 中 心 向 外 创建 选区 ; 同时 按 下 Shift 十 
Alt 组 合 键 ， 可 以 创建 以 鼠标 单 击 处 为 中 心 
点 向 外 的 正方 形 或 者 正 圆 选 区 。 








网 页 制作 与 网 





站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 





创建 多 边 形 选 区 的 . 例如 五 角 星 等 


: :网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 





区 域 。 该 工具 选 


项 栏 与 【 套 索 工具 】 完 全 相似 。 在 画布 中 的 不 同位 























置 单 击 形成 多 边 形 ， 当 指针 带 有 小 圆圈 形状 时 单 





H 


击 . 可 以 生成 多 边 形 选 





区 。 


3. 单行 /单列 选 框 工 具 

工具 箱 中 的 【单行 选 框 工具 】[s3J 和 【单列 选 
框 工具 】[L i， 可 以 选择 一 行 像素 或 一 列 像素 。 如 
果 为 这 两 个 选区 填充 颜色 , 则 可 以 在 网 页 图 像 中 制 
作 一 px 的 细 线 。 





2.3.2 ”使 用 套 索 工 具 


Photoshop 中 的 套 索 工具 组 包括 【 套 索 工具 】 
品 【 多 边 形 套 索 工 具 】 吕 和 【磁性 套 索 工 具 】 喉 |.。 
1. 套 锁 工具 

【 套 索 工具 】| 史 也 可 以 称 为 曲线 套 索 ,使 用 该 
工具 可 以 在 网 页 图 像 中 创建 不 规则 的 选区 。 
















































使 用 【 套 索 工具 】〗 创 建 曲线 区 域 时 ， 如 果 饼 
标 指针 没有 与 起 点 重合 ， 释放 鼠 标 后 , 会 自 
动 与 起 点 之 间 生 成 一 条 直线 , 封闭 未 完成 的 
选择 区 域 。 





2. 多 边 形 套 锁 工具 
【多 边 形 套 索 工具 】 [ 避 是 





通过 鼠标 的 连续 单 击 








选取 中 按 下 Shift 键 可 以 保持 水 平 、 重 直 或 
者 45° 角 地 绘制 选区 。 如 在 同一 选区 中 创建 
曲线 与 直线 , 那么 在 使 用 【 套 索 工具 】〗 与 【多 
边 形 工具 〗 时 ， 按 下 Alt 键 可 以 在 两 者 之 间 
快速 切换 。 




















3. 磁性 套 锁 工具 

在 背景 与 主题 色调 对 比 强烈 , 并且 主 题 边缘 复 
杂 的 情况 下 ,使 用 【磁性 套 索 工具 】[ 吕 | 可 以 方便 、 
准确 、 快 速 地 选取 主体 图 像 。 只 要 在 主体 边缘 单 击 
即 可 沿 其 边缘 自动 添加 节点 。 


















































选择 【磁性 套 索 工具 】[ 名 ] 后 ， 工 具 选 项 栏 中 
将 显示 其 选项 ， 选 项 名 称 及 功能 如 下 所 述 。 

口 宽度 : 用 于 设置 该 工具 在 选取 时 ， 指 定 检 
测 的 边缘 宽度 ,其 取 值 范围 是 1 一 40 像素 ， 
值 越 小 检测 越 精确 。 

口 边 对 比 度 : 用 于 设置 该 工具 对 颜色 反差 的 
敏感 程度 ， 其 取 值 范围 是 19% 一 1009%6， 数 
值 越 高 ， 敏 感度 越 低 。 

口 频率 : 用 于 设置 该 工具 在 选取 时 的 节 
点 数 ， 其 取 值 范围 是 0 一 100， 数 值 越 高 
选取 的 节点 越 多 ， 得 到 的 选区 范围 也 越 
精确 。 

口 钢笔 压力 : 用 于 设置 绘图 板 的 钢笔 压力 。 
该 选项 只 有 安装 了 绘图 板 及 驱动 程序 时 
才 有 效 。 


2.3.3 ”使 用 魔 棒 工 具 


【 魔 棒 工具 】[ 巷 与 选 框 工具 、 套 索 工具 不 同 . 
它 是 根据 在 图 像 中 单 击 处 的 颜色 范围 来 创建 选区 
的 , 也 就 是 说 某 一 颜色 区 域 为 何 形状 , 就 会 创建 该 
形状 的 选区 。 选 择 【 魔 棒 工 具 】[ 医 ] 后 ， 会 在 工具 
选项 栏 中 出 现 一 些 与 其 他 工具 不 同 的 选项 , 其 中 一 
些 注 意 选 项 的 设置 和 使 用 方法 如 下 所 述 。 
1. 取样 大 小 

该 选项 包括 【取样 点 ]、[【3 x 3 平均 ] 【5x5 
平均 ] 【11 x 11 平均 ]、[【31 x 31 平均 ] 、【51 x 51 
平均 】 和 【101 x 101 平均 】 选 项 。 这 些 选 项 限制 
了 读 取 所 单 击 区 域内 指定 数量 像素 的 平均 值 。 
2. 容 差 

设置 选取 颜色 范围 的 误差 值 , 取 值 范围 在 0 一 
255 之 间 .默认 的 容 差 数值 为 32 输入 的 数值 越 大 . 
则 选取 的 颜色 范围 越 广 . 创建 的 选区 就 越 大 : 反之 
选区 范围 越 小 。 
3. 连续 

默认 情况 下 为 启用 该 选项 . 表示 只 能 选中 与 单 
击 处 相连 区 域 中 的 相同 像素 ; 如 果 禁 用 该 选项 则 能 
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够 选中 整 幅 图 像 中 符合 该 像素 要 求 的 所 有 区 域 。 
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4. 对 所 有 图 层 取样 

当 图 像 中 包含 多 个 图 层 时 , 启用 该 选项 后 , 可 
以 选中 所 有 图 层 中 符合 像素 要 求 的 区 域 ; 禁用 该 选 
项 后 ， 则 只 对 当前 作用 图 层 有 效 。 


2.3.4 【色彩 范围 】 命 令 


创建 选区 除了 使 用 选取 工具 外 .还 可 以 使 用 命 
令 来 创建 Photoshop 在 【选择 】 菜 单 中 设置 了 【 色 
彩 范围 】 命 令 用 来 创建 选区 , 该 命令 与 【 魔 棒 工 具 】 
类 似 ， 都 是 根据 颜色 范围 创建 选区 。 
1. 选取 颜色 

执行 【选择 】|【 色 彩 范 围 】 命 令 ， 在 弹出 
的 【色彩 范围 】 对 话 框 中 ， 使 用 【取样 颜色 】 选 
项 可 以 选取 图 像 中 的 任何 颜色 。 在 默认 情况 下 ， 
使 用 【吸管 工具 】 在 图 像 窗口 中 单 击 选取 一 种 颜色 
范围 。 





























存储 (S).… 


范围 (R) 





多 选择 范围 (E) 〇 图 像 (w) 


选区 预览 : | 无 














色彩 范围 色彩 范围 
(CO): [7 mR 3 = 选择 CO[ 过 取样 基色 < 
0 】 本 色 庆 定 
检测 人 蛤 (D) 癌 本 从 化 声色 鱼 (z) 二 检测 人 瞪 (D) ” 癌 本 地 化 颜色 灸 (2) ee 
村 着 OD 设 豆 ] 5 |] En 闫 色 寄 差 (有 : 加 
载 入 (D… 





人 @ 选择 范围 上 
达 区 [无 = 


O 0 








































当 【 色 彩 范围 】 对 话 框 被 打开 后 ， 图 像 窗口 
中 的 光标 会 变 成 吸管 图 标 。 













































































当 图 像 中 存在 一 种 颜色 的 选区 后 , 再 次 执行 
该 命令 ,并 且 启 用 【从 取样 中 减 去 】〗[ 攻 
提示 “不 能 减 去 任何 颜色 ， 




















因为 现在 仅 选 择 
































2. 颜色 容 差 了 一 种 颜色 
【色彩 范围 】 对 话 框 中 的 【颜色 容 差 】 与 【 麻 
棒 工 具 】 中 的 【 容 差 】 相同 ， 均 是 选取 颜色 范围 的 “4， 反 相 
误差 值 ， 数 值 越 小 ， 选取 的 颜色 范围 越 小 。 当 图 像 中 的 颜色 复杂 时 , 想 要 选择 一 种 颜色 或 
x 者 其 他 入 种 颜色 像素 ,就 可 以 使 用 【色彩 范围 ] 
Ce 命令 在 该 对 话 框 中 选中 较 少 的 颜色 像素 后 ， 启 用 
检测 人 肉 (D) 。 口 ] 本 地 化 颜色 镀 () 台 【 反 相 】 选 项 ， 单 击 【 确 定 】〗】 按 钮 后 得 到 反方 向 
着 色 罕 关 (有 ): EE 选区 
入. 
存 镶 (S)… 色彩 范围 Ea 
国 4 4 园 所 GC): [取样 天 色 4 
G L 迪 | 
口 反 相 ) 检测 人 脸 (D) ” 癌 本 地 化 着 色 狂 (Z) 一 一 一 
颜色 家 关 (: mE 
= 载 和 AD 
ee _ 存 全 (5)..。] 





他 选择 范围 (E) 。” 〇 图 像 (M) 


选区 预览: | 无 外 














3. 添加 与 减 去 颜色 数量 
【颜色 容 差 】 选 项 更 改 的 是 某 一 颜色 像素 的 范 
围 ， 而 对 话 框 中 的 【添加 到 取样 】 台 与 【从 取样 











加 选择 范围 (E) 〇 


选区 预览: [ 无 

















中 减 去 】 之 是 增加 或 者 减少 不 同 的 颜色 像素 。 














2.3.5 选区 基本 操作 


在 实际 的 操作 过 程 中 .会 遇 到 许多 选区 的 基本 
操作 .掌握 这 些 操作 不 但 可 以 增加 图 像 的 更 多 细 
节 , 还 可 以 快速 提高 工作 效率 。 

1. 全 选 与 反选 

不 同形 状 的 选区 可 以 使 用 不 同 选 取 工 具 来 创 
建 . 要 是 以 整个 图 像 或 者 画布 区 域 建立 选区 . 那么 
可 以 执行 【选择 】|【 全 选 】 命 令 。 














个 


有 多 


当 已 经 在 图 像 中 创建 选区 后 , 想 要 选择 该 选区 
以 外 的 像素 时 ， 可 以 执行 【选择 】|【 反 向 】 命 令 . 
即 可 反 向 选择 图 像 。 
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2. 移动 选区 

当 创 建 选区 后 . 可 以 随意 移动 选区 以 调整 选区 
位 置 .移动 选区 不 会 影响 图 像 本 身 效果 。 使 用 鼠 
标 移动 选区 是 最 常用 的 方法 . 确保 当前 选择 了 选 
取 工具 . 将 鼠标 指向 选区 内 ， 按 下 鼠标 左 键 拖 动 
即 可 。 



































在 创建 选区 的 同时 也 可 以 移动 选区 ,方法 是 按 
下 空格 键 并 且 拖 动 鼠标 即 可 。 














想 要 精确 地 移动 选区 ， 可 以 通过 键盘 上 的 4 


个 方向 键 。 如 果 移 动 10px 的 距离 需要 结合 
Shift 键 。 





3. 保存 选区 





在 完成 创建 选区 后 ， 如 果 需 要 多 次 使 用 该 选 
区 . 可 以 将 其 保存 起 来 . 以 便 在 需要 时 载 入 重新 使 
用 . 提高 工作 效率 。 

使 用 选区 工具 或 者 命令 创建 选区 后 . 执行 【 选 








网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 


择 】| 【存储 选 区 】 命 令 . 在 弹出 的 【存储 选 





即 可 。 


一 目标 
XD): [ljpo 3 
通 肖 QO: [ 潭 建 3 
su | 


区 】 对 话 框 中 设置 相应 的 选项 . 单 击 【 确 定 】 按 钮 














一 操作 





(@® 新 建 通道 (E) 

吕 添加 到 通道 (&) 
口 从 通道 中 球 去 (5) 
〇 与 通道 交叉 CD 





其 中 , 在 【存储 选区 】 对 话 框 中 ,主要 包括 下 
列 一 些 选项 。 


口 


口 





文档 ”设置 选区 文件 保存 的 位 置 ， 默 认为 
当前 图 像 文件 。 

通道 ”在 Photoshop 中 保存 选区 实际 上 是 
在 图 像 中 创建 Alpha 通道 。 如 果 图 像 中 没 
有 其 他 通道 ， 将 新 建 一 个 通道 ; 如 果 存在 
其 他 通道 ， 那 么 可 以 将 选区 保存 或 者 替换 
该 通道 。 

名 称 ” 当 【通道 〗 选 项 为 新 建 时 ， 该 选项 
被 激活 ， 为 新 建 通道 创建 名 称 。 

新 建 通道 ” 当 【通道 〗 选 项 为 新 建 时 ， 操 
作为 该 选项 。 

添加 到 通道 ” 当 【 通 道 〗 选 项 为 已 存在 的 
通道 时 ， 选 中 该 选项 是 将 选区 添加 到 所 选 
通道 的 选区 中 ， 保 存 为 所 选 通道 的 命令 。 
从 通道 中 减 去 ” 当 【 通 道 〗 选 项 为 已 存在 
的 通道 时 ， 选 中 该 选项 是 将 选区 从 所 选 通 
道 的 选区 中 减 去 后 ， 保 存 为 所 选 通道 的 
命令 。 

与 通道 交叉 “” 当 【 通 道 】 选 项 为 已 存在 的 
通道 时 ， 选 中 该 选项 是 将 选区 与 所 选 通道 
的 选区 相交 部 分 ， 保 存 为 所 选 通道 的 
名 称 。 








4. 载 入 选区 

将 选区 保存 在 通道 后 . 可 以 将 选区 删除 进行 其 
他 操作 。 当 想 要 再 次 借助 该 选区 进行 其 他 操作 时 
执行 【选择 】|【 载 入 选区 】 命 令 ， 在 弹出 的 【 载 
入 选区 】 对 话 框 中 .设置 各 项 选项 ， 单 击 【 确 定 】 
按钮 即 可 。 






































| 口 从 选区 中 残 去 () 
| 口 与 选区 交叉 (0 





其 中 , 在 【 载 入 选区 】 对 话 框 中 , 主要 包括 下 
列 一 些 选项 。 

口 文档 ”选择 已 保存 过 选区 的 图 像 文件 
名 称 。 

口 通道 ”选择 已 保存 为 通道 的 选区 名 称 。 

口 反 相 启用 该 选项 ， 载 入 选区 将 反选 选区 
外 的 图 像 。 相 当 于 载 入 选区 后 执行 【选择 】 
|【 反 向 】 命 令 。 

口 新 建 选区 在 图 像 窗口 中 没有 其 他 选区 
时 ， 只 有 该 选项 可 以 启用 ， 即 为 图 像 载 入 
所 选 选区 。 

口 添加 到 选区 当 图 像 窗口 中 存在 选区 时 ， 
选中 该 选项 是 将 载 入 的 选区 添加 到 图 像 
原 有 的 选区 中 ， 生 成 新 的 选区 。 

口 从 选区 中 减 去 当 图 像 窗口 中 存在 选区 
时 ,选中 该 选项 是 将 载 入 的 选区 与 图 像 原 
有 选区 相交 副本 删除 ， 生 成 新 的 选区 。 

口 与 选区 交叉 “” 当 图 像 窗 口中 存在 选区 时 ， 
选中 该 选项 是 将 载 入 的 选区 与 图 像 原 有 
选区 相交 副本 以 外 的 区 域 删除 ， 生 成 新 的 
选区 。 
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;7 国 练习 : 设计 网 站 Logo 





对 于 网 站 来 讲 ，Logo 即 是 标志 、 微 标 。 而 对 于 一 个 追求 精美 的 
网 站 来 讲 . Logo 则 是 它 的 灵魂 所 在 。 一 个 好 的 Logo 不 仅 可 以 让 人 对 
它 所 代表 的 网 站 类 型 和 内 容 一 目 了 然 .而 且 还 可 以 增加 网 站 的 标志 性 
和 美观 度 。 在 本 练习 中 ， 将 通过 制作 一 个 商业 网 站 的 Logo. 来 详细 
介绍 网 站 Logo 的 制作 方法 和 实用 技巧 。 











新 建文 档 

新 建 图 层 

添加 矢量 莹 版 
添加 图 层 样式 
使 用 文字 工具 
使 用 钢笔 工具 
使 用 渐变 工具 
使 用 选择 工具 
设置 文本 格式 











Pg 
[EE 
一 ma 











操作 步骤 “》》》 
STEP|01 执行 【文件 】| 【新 建 】 命 令 ,， 在 弹出 的 
【新 建 】 对 话 框 中 设置 文档 参数 ， 并 单 击 【 确 定 】 


















































® f. a ©. [us 2 


ee STEP|03 单 击 【 工 具 箱 】 面 板 中 的 【渐变 工具 】 
按钮 ， 同 时 单 击 【工具 选项 】 栏 中 的 【渐变 色 块 】 
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pe EE 


像素 长 宽 比 (X): | 方形 铺 素 




















也 单 击 





STEPI02 在 【图 层 】 面 板 中 . 单 击 底部 的 【新 建 
图 层 】 按 钮 ， 创 建 名 为 “图 层 1” 的 图 层 。 
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STEP|04 在 【渐变 编辑 器 】 对 话 框 中 . 单 击 渐变 


























i 
条 下 方 边缘 ,添加 色 标 . 并 将 其 【位 置 】 分 布设 置 PS 
为 32、51 和 73。 jn 
Sa 
人 
到 
ga ~ 





ee | ~ 








STEP|08 松 开 鼠 标 后 . 将 显示 渐变 背景 图 像 。 单 
击 【 图 层 】 面 板 中 的 【添加 图 层 蒙 版 】 按 钮 ， 为 图 
层 1 添加 图 层 蒙 版 。 




















STEP|05 双击 左 侧 第 1 个 色 块 . 在 弹出 的 【 拾 色 
器 ( 色 标 颜色 )】 对 话 框 中 , 将 颜色 设置 为 所 f9ae6 , 
单 击 【 确 定 】 按 钮 即 可 。 使 用 同样 的 方法 . 分 别 将 
剩余 色 块 依次 设置 为 #3fb0 任 、 #77ac0、#6fb9 全 和 


















































STEPI09 ， 然后 , 执行 【图 层 】| 【矢量 蒙 板 】|【 隐 
[ow 十] 藏 全 部 】 命 令 ， 隐 藏 蒙 版 。 此 时 ， 图 层 1 中 将 会 显 
Os: |so 

De |9 

DR 

a Oe|is 

| 口 只 有 web 所 外 区 RE [230 





















































STEP|06 最 后 . 将 【名 称 】 设置 为 logo. 单 击 【新 
建 】 按 钮 ， 保存 渐变 设置 。 














ow Se 0 
STEP|10 在 【工具 箱 】 面 板 中 单 击 【 钢 笔 工具 】 按 
钮 , 在 “图 层 1” 图 层 中 , 绘制 一 个 “三 角形 ” 图像。 






























给 市、 











STEP|07 单 击 【 工 具 选 项 】 栏 中 的 【对 称 渐变 】 
按钮 , 在 “图 层 1 ”图 层 中 ， 从 左上 角 向 右 下 角 拖 
动 鼠标 .绘制 出 一 条 斜 线 。 




















STEP|11 在 【工具 箱 】 面 板 中 单 击 【 直 接 选 择 工 
具 】 按 钮 . 选择 “三 角形 ”图 像 . 进行 调整 。 
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STEP|12 然后 . 单 击 【 工 具 箱 】 中 的 【渐变 工具 】 
按钮 , 在 图 像 上 从 左上 角 向 右 下 角 拖 动 鼠 标 . 绘制 
渐变 斜 线 。 














STEPI13 复制 “图 层 1” 图 层 ， 在 新 复制 的 “图 
层 1 拷贝 ”图 层 中 ,调整 三 角形 图 像 的 位 置 。 













































































100% [3 让 5127KJi48M Pl 





STEP|14 执行 【编辑 】| 【交换 】| 【水 平 翻转 】 命 
令 ， 翻转 三 角形 并 调整 其 位 置 。 








一 
STEP|15 在 【工具 箱 】 面 板 中 单 击 【渐变 工具 ] 
按钮 ,从 右 下 方向 左上 方 倾斜 拖 动 鼠标 . 设置 渐变 
颜色 。 

















0% 匣 到 汕 S57KSM 了 ， ee 





STEP|16 选择 “图 层 1” 图 层 ， 单 击 【 图 层 】 面 
板 中 的 【添加 图 层 样式 】 按 钮 ,在 弹出 的 菜单 中 选 
择 【 和 斜面 和 浮雕 】 选 项 。 
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STEP| 人 7 在 弹出 的 【图 层 样 式 】 对 话 框 中 . 设置 
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斜面 和 浮雕 图 层 样式 的 各 项 参数 ， 将 【阴影 模式 ] 
的 颜色 设置 为 #2a9bdc， 并 单 击 【 确 定 】 按 钮 。 











:网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 : 





STEP|19 在 【工具 箱 】 面 板 中 ， 单 击 【 横 排 文 字 
工具 】 按 钮 . 输入 文本 并 设置 文本 的 字体 格式 。 




















人 | 
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口 元 



































四 设置 
[EE 











STEP|18 选择 “图 层 1 拷贝 ”图 层 . 单 击 【 图 
层 】 面 板 中 的 【添加 图 层 样 式 】 按 钮 选择 【和 斜面 
和 浮雕 】 选 项 ， 在 弹出 的 对 话 框 中 设置 相应 参数 
即 可 。 
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STEP|20 单 击 【图 层 】 面板 中 的 【添加 图 层 样式 】 
按钮 ,选择 【渐变 二 加 】 选 项 ,在 弹出 的 对 话 框 中 
单 击 【 渐 变 】 下 拉 按钮 . 在 其 下 拉 列 表 中 选择 一 种 
渐变 色 ， 单 击 【 确 定 】 按 钮 即 可 。 
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和 调 练习 : 制作 个 人 博客 网 页 界面 


博客 是 个 人 媒体 、 个 人 网 络 导航 和 个 人 搜索 引擎 ， 它 是 以 个 人 
为 角度 ， 以 整个 互联 网 为 视野 ， 精 选 和 记录 自己 所 看 到 的 精彩 内 容 
并 为 他 人 提供 帮助 , 使 其 具有 更 高 的 共享 价值 。 在 本 练习 中 . 将 通过 
制作 一 个 个 人 博客 网 页 界面 . 来 详细 介绍 图 层 、 选择 工具 . 渐变 工具 


等 基本 操作 工具 的 使 用 方法 和 操作 技巧 。 
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新 建文 档 
新 建 图 层 

使 用 矩形 选 框 工具 
使 用 渐变 工具 
使 用 移动 工具 
添加 矢量 莹 版 
输入 文本 
设置 文本 格式 
设置 描 边 样式 


瞬间 让 人 清醒 的 话语 


sa NA 











操作 步骤 “》》》 

STEP|01 执行 【文件 】| 【新 建 】 命 令 ， 在 弹出 的 
【新 建 】 对 话 框 中 , 设置 文档 参数 ,并 单 击 【 确 定 】 
按钮 。 


文档 类 型 Dj: [ 自 定 单 击 | 到 ma 消 ] 
大 :| 引 | [让 全 Wisl- ] 


太 风 了 预 设 (D) 













































































颜色 模式 (M): | RGB 颜色 > 














高 加 [加 设置 
本 LD 设 于 


re | sRG3 IEC61666-2.1 




















像素 长 宽 比 (区 : | 方形 像素 





STEP|02 在 【图 层 】 面 板 中 ， 单 击 底部 的 【新 建 
图 层 】 面 板 ， 创 建 名 为 “图 层 1” 的 图 层 。 ge 
STEP|03 单 击 【 工 具 箱 】 面 板 中 的 【 甜 形 选择 工 

具 ]】 按钮 , 绘制 一 个 与 画面 大 小 相同 的 矩形 。 同时 ， S$TEPI04 然后 . 在 弹出 的 【填充 】 对 话 框 中 ,将 
右 击 画 面 执 行 【填充 】 命 令 。 【内 容 】 设 置 为 “颜色 ”。 在 弹出 的 【 拾 色 器 (填充 
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:::: 网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 


网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 








颜色 )】 对 话 框 中 ， 将 填充 色 设置 为 #cee6b4。 - °E| 




























































































| a 名 称 (N): [ 自 定 ] [新建 (Ww) 
ET 和 | 
| ET 了 乎 寻 度 (Ww): [100] - 
lo] 色 标 
不 透明 度 -I% 位 置 又 | _ 赂 除 (D) 
STEP|05 打开 图 像素 材 “topjpg” 文 件 ， 并 将 其 me: ”| sco: [1 | % [mo | 














息 到 当前 文档 中 。 选 择 “ 图 层 2” 图 层 ， 单 击 【 图 
导 4 【 添 莹 
层 】 面 板 底部 的 【添加 矢量 蒙 版 】 按 钮 。 STEP|08 然后 ， 在 【工具 选项 栏 】 中 单 击 【 线 性 


要 证 =、 。 浙 支 ] 拉 钮 ， 并 在 图 像 上 从 左 到 右 拖 动 鼠 标 ， 添 




















pg :加 ooTEgE 渐变 色 。 
正常 3] 赴 肖 明 度 : [100%| ~ 











WE: 田中 Mt: [100%|- 

"C=: | 
图 层 1 

EE 本 


[Ge 
SP 








Ex es 和 ? 
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其 让 和 补 老 早 就 唐 才 可 驹 了 
本 -| | 加 os co 
STEP|06 单 击 【 工 具 箱 】 面 板 中 的 【渐变 工具 】 CTI 2 < EX 半 1 | 


按钮 同时 单 击 【 工 具 选项 栏 】 中 的 【渐变 色 块 】 STEp|09 新 建 图 民 3， 单 击 【工具 箱 】 面 板 中 的 
【和 矩 形 选 框 工具 】 按 钮 ， 在 图 层 中 绘制 一 个 矩形 。 
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上 EL 17 IE J "uy 














] 
|56.67% [EW 去 档 辽 934M1435M 
STEP|07 在 弹出 的 【渐变 编辑 器 】 对 话 框 中 . 设 STEP|10 然后 . 执行 
置 黑白 黑 3 个 色 标 ， 并 单 击 【 确 定 】 按 钮 。 命令 .在 弹出 的 【于 








【选择 】| 【修改 】| 【平滑 】 
滑 选 区 】 对 话 框 中 . 将 【取样 
















































rr 认定 | 用 
口 庙 用 国 边 界 3 泪 果 . 


| 
设置 


| | 





ER 


2 
STEP|11 右 击 区 域 执 行 【 填 充 】 命 令 ， 在 弹出 的 
【填充 】 对 话 框 中 ,将 【内 容 】 设 置 为 “颜色 。 然 
后 ， 在 弹出 的 【 拾 色 器 (填充 颜色 )】 对 话 框 中 
将 填充 色 设置 为 #eeeeee。 





















境 而 



























内 容 : 
全 
Co 天 
坏话 明 度 (Oj: [10 和 
口 保留 语 明 区 域 P) 
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口 只 有 wwb 颜色 
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填充 类 型 : | 颜色 > 


:国生 *|327725 
设置 为 点 认 值 槛 位 为 默认 值 














STEP|14 单 击 【 横 排 文字 工具 】 按 钮 .输入 “ 主 
页 ”文本 ,并 在 【字符 】 面 板 中 ,设置 文本 的 字体 
格式 。 使 用 同样 方法 . 输入 其 他 文本 , 并 设置 其 字 
体格 式 。 









































c 
Oe [23s] M: 
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STEP|12 选择 “图 层 3” 图 层 ， 按 下 Ctrl+T 组 合 
键 . 将 矩形 大 小 调整 为 “905 x 690 像素 ， 并 按 下 
Enter 键 完 成 转换 。 
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STEP|13 单 击 【 图 层 】 面 板 底 部 的 【添加 图 层 样 
式 】 按 钮 .选择 【 描 边 】 选 项 . 在 弹出 的 【图 层 样 
式 】 对 话 框 中 . 设置 描 边 样式 即 可 。 


























STEP|15 分 别 新 建 “ 图 层 4”~“ 图 层 7” 图 层 ， 
绘制 一 个 【取样 半径 】 为 “15” 像 素 , 其 大 小 分 别 
为 “246 x 264 像素 "、“246 x 264 像素 "、“271 x 488 
像素 "、“829 x 90 像素 "、 的 矩形， 并 填充 为 “ 白 











To 














STEPI16 选择 “图 层 4” 图 层 , 将 相应 的 图 片 素 
材 拖 入 到 “图 层 4” 图 层 中 .并 排列 其 具体 位 置 。 
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STEP|17 选择 头像 图 像 ， 单 击 【 图 层 】 面 板 底 部 
的 【添加 图 层 样式 】 按 钮 选择 【 描 边 】 选 项 . 在 
弹出 的 对 话 框 中 设置 描 边 参数 。 
本 描 边 三 === 三 | 
结构 
大 SG 一 | 像素 
位置: | 内 部 * 
混合 模式 : | 正常 = 
T 通 明度 [0): 一 Dl100 |% 
口 到 
填充 类 型 : | 颜色 
ii: 国生 | * [327725 
[Li 本 为 怀 认 值 】 [复位 为 & 认 值 























;网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 : 


STEP|18 使 用 同样 方法 ， 分 别 为 其 他 图 层 添加 图 
片 。 同 时 . 在 相应 图 层 中 输入 文本 . 并 设置 文本 的 
字体 格式 。 


| 富民 届 已 现 局 届 忆 现 尼 现世 其 乓 现 忆 再 忆 表 忆 机 记 而 氏 丙 已 列 记 十 诺 汪 
回 和 
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yi 调 新 手 训练 营 


练习 1: 制作 软件 下 载 站 导航 页 界面 
人 downloadstz\ 新 手 训练 营 坎 件 下 载 站 导航 页 
界面 
提示 : 本 练习 中 , 首先 运用 【渐变 工具 】 设 置 背 
景 图 层 的 渐变 填充 颜色 ， 新建 图 层 并 使 用 【和 矩形 选 杠 
工具 】 绘 制 选区 ， 同 时 使 用 【渐变 工具 】 填 充 选 区 。 
然后 ， 新 建 图 层 ， 使 用 【和 矩形 选 框 工具 】 绘 制 选 区 , 
并 设置 其 图 层 样式 和 填充 颜色 ;同时 . 使 用 【 横 排 文 
字 工 具 】 输 入 logo 文本 . 并 设置 文本 图 层 样式 。 最 后 . 
新 建 图 层 . 添加 图 层 素 材 ， 使 用 【和 矩形 选 框 工具 】 绘 
制 选区 并 设置 选区 图 层 样式 ; 同时 输入 相应 的 文本 并 

设置 文本 格式 。 
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练习 2: 制作 导航 图 标 
他 downloads\2\ 新 手 训练 营 \ 制 作 导 航 图 标 
提示 : 本 练习 中 . 首先 新 建 图 层 . 运用 【和 矩形 选 


网 页 图 像 设 计 基 础 

















框 工具 】 选 区 区 域 . 并 通过 【图 层 样式 】 功 能 为 选区 
添加 样式 ,设置 选区 效果 . 以 制作 导航 图 标的 基础 图 
形 。 然后 , 通过 为 图 形 添加 图 片 . 并 盖 印 图 层 的 方法 . 
来 制作 导航 图 标的 显示 内 容 。 




































































练习 5: 制作 水 中 倒影 效果 
全 downloads\2\ 新 手 训练 营 \ 水 中 倒影 
提示 本 练习 中 ， 首 先 打开 素材 图 像 ， 使 用 【和 矩 
l 选 框 形状 】 绘 制 选区 。 复 制图 层 ， 隐 藏 背景 图 层 ， 
4 ~ 司 时 复制 当前 图 层 并 垂直 翻转 新 图 层 。 然 后 移动 图 
层 位 置 , 调 整 图 层 副本 的 大 小 ,并 调整 期 亮度 /对 比 度 
最 后 ， 使 用 “模糊 ” 渡 镜 设置 图 像 的 模糊 程度 ， 实 现 

练习 3: 制作 独立 按钮 虚幻 的 倒影 效果 。 

信 downloads\2\ 新 手 训练 营 \ 制 作 独 立 按 钮 
提示 : 本 练习 中 ,首先 新 建文 档 ， 并 填充 背景 图 
层 的 颜色 。 新 建 图 层 ， 使 用 【 国 角 矩形 工具 】 绘 制 形 
状 ， 并 将 形状 填充 为 白色 。 然 后 ， 新 建 图 层 ， 同样 使 
用 【 国 角 矩形 工具 】 绘 制 一 个 比 上 个 图 层 形状 小 的 国 
角 和 矩形 形状 ， 并 为 其 添加 【 描 边 ] 、【 内 发 光 】 和 【 渐 
变 筠 加】 图 层 样式 .最 后 .新建 2 个 图 层 ， 分 别 绘制 
相应 的 形状 ， 并 设置 形状 的 填充 颜色 。 同 时 ， 输 入 横 

排 文 本 并 设置 文本 的 字体 格式 。 
















































































































































































练习 4: 制作 雨中 的 江南 园林 
人 downloads\2\ 新 手 训练 营 \ 雨 中 的 江南 园林 
提示 ， 本 练习 中 ， 首 先 打 开 素材 图 片 ， 复 制 “ 背 
景 ”图 层 . 设置 “背景 副本 ”图 层 的 曲线 效果 ; 同 
时 .将 前 景色 设置 为 黑色 .使 用 【画笔 工具 ] 涂抹 * 背 | 练习 6: 制作 神秘 的 古 堡 效果 
景 副本 ”图 层 ， 并 使 用 【通道 】 面 板 调整 图 层 效果 。 全 downloads\2\ 新 手 训练 营 \ 神 秘 的 古 堡 





































































































然后 , 添加 “乌云 ”素材 . 设置 其 【混合 模式 】 选 项 提示 : 本 练习 中 .首先 打开 素材 图 像 . 创建 新 的 
并 调整 图 层 位 置 。 最 后 ,复制 图 层 ， 并 使 用 滤 镜 功能 ”填充 或 调整 图 层 ， 并 设置 【通道 混合 器 】 参 数 。 使 用 
设置 “下 雨 ”效果 。 【钢笔 工具 】 创 建 天 空 之 外 的 路 径 ， 转 换 选 区 ,复制 









































网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 


图 层 并 隐藏 “背景 ”填充 。 然 后 . 添加 “乌云 密布 ” 练习 8: 制作 梦幻 瀑布 效果 


素材 图 像 . 调整 其 图 层 位 置 . 使 用 
和 [并 1 人 人 设 生 约 果 ， 后 ， 全 用 【并 和 DE 
提示 : 本 练习 中 . 首先 打开 素材 图 像 ， 调整 图 像 


十 司 形 “党 沁 ” 滤 镑 和 图 层 
de ee 0 的 阴影 和 高 光 效 果 , 复制 图 层 并 使 用 “模糊 ” 滤 镜 功 
渡 镜 功能 制作 门窗 亮光 。 能 增加 图 像 的 模糊 效果 。 然 后 , 设置 副本 图 层 的 混合 

模式 . 使 用 “ 泻 染 ” 滤 镜 泻 染 图 像 效 果 ， 使 用 【从 选 
区 生成 工作 路 径 】 和 【钢笔 工具 】 制 作 图 像 路 径 。 最 
后 , 将 路 径 转 换 为 选区 ,并 进行 羽化 选区 ， 以 及 新 建 
白色 填充 图 层 和 设置 图 层 不 透明 度 等 操作 。 













































































练习 7: 制作 绎 纳 晨 雾 效 果 
信 downloads\2\ 新 手 训练 营 \ 渐 绎 纳 展 雾 
提示 : 本 练习 中 , 首先 打开 素材 图 像 ， 新 建 空白 
图 层 , 按 D 键 还 原 默认 的 前 景色 和 背景 色 ,并 运用 泻 
染 ” 滤 镜 泻 染 图 像 。 然 后 , 执行 【编辑 】|【 渐 隐 云 彩 】 
命令 ， 并 调整 【不 透明 度 】 为 70%， 设置 图 像 效 果 。 
最 后 ， 运 用 “模糊 ” 滤 镜 效果 增加 图 像 的 模糊 效果 ， 
同时 将 “图 层 1” 的 图 层 混合 模式 调整 为 “ 滤 色 ”。 















































;网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 : 


RU 


Photoshop 以 编辑 和 处 理 图 像 著 称 ， 它 也 具有 矢量 图 形 软 件 的 某 些 功能 ， 可 以 使 用 路 径 功能 对 图 像 
进行 编辑 和 处 理 。 图 像 的 所 有 编辑 几乎 都 依赖 于 图 层 ， 通 过 图 层 可 以 方便 地 修改 图 像 ， 简 化 图 像 操 作 ， 
使 图 像 编辑 更 具有 弹性 。 此 外 . Photoshop 还 为 用 户 提供 了 强大 的 文字 功能 和 10 多 种 专门 用 于 修饰 和 修 
复 问题 照片 的 工具 ,它们 不 仅 可 以 为 图 像 添 加 复杂 多 彩 的 文字 效果 , 还 可 对 一 些 破损 或 有 污点 的 图 像 进 
行 精确 而 全 面 的 修复 。 本 章 将 通过 Photoshop 软件 的 图 层 和 文本 的 应 用 . 以 及 绘制 与 修复 图 像 等 知识 点 ， 
来 详细 介绍 网 页 图 像 处 理 的 实用 方法 和 操作 技巧 。 











网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 


:; 网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 


国 EE 对应 用 图 上 





Photoshop 中 的 图 层 就 像 一 张 张 堆 夫 在 一 起 的 
透明 纸 . 每 张 透明 纸 就 是 一 个 图 层 , 这 多 张 透明 纸 














将 图 像 分 出 层次 ， 上面 的 在 前 面 ， 下 面 的 在 后 面 。 
并 且 透 过 图 层 的 透明 区 域 ， 可 以 观察 到 下 面 的 内 容 。 
































3.1.1 图 层 的 基本 操作 


在 Photoshop 中 , 编辑 操作 都 是 基于 图 层 进行 
的 ,例如 创建 新 图 层 、 复 制图 层 、 删 除 图 层 等 。 只 
有 了 解 图 层 的 基本 操作 后 , 才 可 以 更 加 自如 地 编辑 
图 像 。 
1. 创建 与 设置 图 层 颜 色 

在 不 同 的 图 层 中 绘制 图 像 . 可 以 方便 地 更 改 某 
个 图 层 , 而 不 影响 其 他 图 层 中 的 图 像 。 单 击 【 图 层 】 
面板 底部 的 【创建 新 建 图 层 】 按 钮 | 怕 |， 即 可 创建 
空白 的 普通 图 层 。 













































































当 图 层 过 多 时 , 还 可 以 通过 设置 图 层 的 显示 颜 
色 来 区 分 图 像 。 对 于 现 有 的 图 层 . 右 击 图 层 . 在 弹 
出 的 菜单 中 选择 相应 的 颜色 即 可 。 






























































2. 调整 图 层 顺 序 

在 编辑 多 个 图 层 时 ， 图 层 的 顺序 排列 也 很 重 
要 。 上面 图 层 的 不 透明 区 域 可 以 覆盖 下 面 图 层 的 图 
像 内 容 。 如 果 要 显示 覆盖 的 内 容 . 便 需要 对 该 图 层 
顺序 进行 调整 。 

选择 要 调整 顺序 的 图 层 , 执行 【图 层 】 | 【 排 
列 】| 【前 移 一 层 】 命 令 ， 即 可 将 该 图 层 上 移 一 层 。 
用 同样 的 方法 . 执行 【后 移 一 层 】 命 令 . 即 可 将 该 
图 层 下 移 一 层 。 


























加 局 尝 旭 (G) cul+G 
NN mms) shitrcu:G 
全 站 三 (R) Qn 














me shit+cw+] 
前 移 一 屋 (W) cul+] 

















另外 .选择 需要 调整 顺序 的 图 层 . 拖 动 该 图 
层 到 目标 图 层 上 方 ， 释放 鼠标 即 可 调整 该 图 层 








P 和 让 加 OTDR 

















下 党 -| 而 明度: 
WE: A 



































3. 复制 图 层 
复制 图 层 不 仅 可 以 用 来 加 强 图 像 效 果 , 而 且 也 
可 以 保护 源 图 像 ， 复 制图 层 的 方法 有 以 下 几 种 。 
口 命令 法 ”选择 要 复制 的 图 层 ,执行 [图 层 】 
| 复制 图 层 】 命 令 ， 在 弹出 的 【复制 图 层 】 
对 话 框 中 输入 图 层 名 称 即 可 。 
口 拖 动 法 选择 要 复制 的 图 层 ， 将 该 图 层 拖 
动 到 【创建 新 图 层 】 按 人 钮 加 | 上 即 可 复制 
图 层 。 
口 快捷 键 法 ” 按 快捷 键 Ctrl 十 J， 执 行 【通过 
拷贝 的 图 层 】 命 令 即 可 。 
口 键盘 法 ”选择 【移动 工具 】[z 名 ， 同 时 按 
下 Shift 键 并 拖 动 图 像 ， 即 可 复制 图 像 所 
在 的 图 层 。 
4. 锁定 图 层 
锁定 图 层 可 以 保护 图 层 的 属性 不 被 破坏 ， 
Photoshop 共 提 供 了 以 下 4 种 锁定 方式 。 
口 锁定 全 部 图 可 以 将 图 层 的 所 有 属性 锁 
定 ， 除 了 可 以 对 图 像 进行 复制 并 放 入 图 层 
组 以 外 的 一 切 编辑 均 不 能 应 用 到 锁定 的 
图 像 当 中 。 
口 锁定 透明 像素 回 ”启用 该 按钮 后 ,图 层 中 
的 透明 区 域 将 不 被 编辑 。 
口 锁定 图 像 像素 加 “启用 【锁定 图 像 像素 】 
按钮 加， 无 法 对 图 层 中 的 像素 进行 修改 ， 
包括 使 用 绘图 工具 进行 绘制 ， 以 及 使 用 色 
调调 整 命令 等 。 
口 锁定 位 置 团 “ 单 击 【 锁 定位 置 】 按 钮 ， 图 
层 中 的 内 容 将 无 法 移动 。 
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5. 链接 图 层 

链接 图 层 可 以 同时 对 多 个 图 层 进行 变换 操作 ， 
例如 移动 、 旋 转 、 缩 放 等 操作 。 按 Ctrl 键 选择 多 个 
图 层 ， 然 后 单 击 【 图 层 】 面 板 下 方 的 【链接 图 层 】 
按钮 外 | 即 可 。 
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Pp :| 国人 TH 












































6. 合并 图 层 

越 是 复杂 的 图 像 . 其 图 层 数量 越 多 ,这样 不 仅 
导致 图 形 文件 大 ， 还 给 存储 和 携带 带 来 很 大 的 麻 
烦 。 这 时 .可 以 通过 不 同方 式 进行 图 层 合并 。 

若 想 合并 相 邻 的 两 个 图 层 或 组 , 可 以 执行 【图 
层 】|【 向 下 合并 】 命 令 ， 将 它们 合并 为 一 个 图 层 。 






























































另外 , 当 【 图 层 】 面 板 中 存在 隐藏 图 层 时 , 执 
行 【图 层 】|【 合 并 可 见 图 层 】 命 令 ， 便 可 以 将 所 
有 可 见 图 层 进行 合并 。 





图 屋 

[ss :|] 回 OTTO 
[ER 4] 二 :100%] ~ 
WE: 四 中 人 。 toxl] 






































7. 盖 印 图 层 

盖 印 图 层 可 以 合并 可 见 图 层 到 一 个 新 的 图 层 . 
但 同时 使 原始 图 层 保持 完好 。 

选中 所 需要 盖 印 的 图 层 或 者 链接 的 图 层 , 按 快 
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捷 键 Ctl+AltrE， 即 可 盖 印 多 个 图 层 或 链接 图 层 。 
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另外 , 显示 隐藏 的 图 层 . 保持 所 有 图 层 的 可 见 
性 ， 按 快捷 键 Ctrl+Alt+ShifttE， 即 可 盖 印 所 有 可 























































































































见 图 层 。 

图 屋 

[p 起 :加 OT 了 OO 

正常 证 而 明 度 : [co% 

锁定 : 图 4 中 B 境况 :|100% 

时 图 层 5 拷贝 时 | 脱 ,. 图 层 2 

四 图 层 1 拷贝 公共. 汉 图 层 持 风 

® 及. Ro 图 展 1 持 由 

. 图 层 1 个 La 
ef 图 层 1 

四 反 回 .四 加 全 四 友 回 加 四 加 斌 | 
3.1.2 ”图 层 分 组 











使 用 图 层 组 可 以 方便 地 对 大 量 的 图 层 进行 统 
一 的 编辑 与 管理 , 可 以 像 文 件 夹 一 样 将 所 有 的 图 层 
装载 进去 ， 即 将 多 个 图 层 归 为 一 
1. 创建 图 层 组 

单 击 【 图 层面 板 底部 的 【创建 新 组 ] 按 钮 外 |. 
即 可 创建 一 个 图 层 组 ,然后 , 当 用 户 再 创建 图 层 时 . 
所 创建 的 图 层 便 会 显示 在 图 层 组 中 。 





















































































































































选择 多 个 图 层 . 执行 【图 层 】| 【图 层 编组 】 
即 可 将 选中 的 图 层 放 置 在 新 建 图 层 组 中 。 
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en 3 明度 : [100%| - ] 让 | 大 二 明度: [100% 
多 :加 也 可 「 站 选择 和 [-] | 如: 田 定 8 [ooy 
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选中 多 个 图 层 ， 按 住 Shfit 键 单 击 
底部 的 【创建 新 组 】 按 甸 四 |， 
图 层 中 创建 新 组 。 另 外 ， 
捷 键 Ctrl+ShfitrG 可 以 取消 图 层 组 。 





在 Photoshop 中 
其 他 图 层 组 内 , 这 种 访 套 
用 户 只 需 在 图 层 组 中 选中 图 层 ， 单 击 
按钮 ， 即 可 创建 说 套图 层 组 。 


可 以 将 当前 的 图 











同样 能 够 从 
选择 图 层 组 ， 按 快 








【图 层 】 





层 组 谋 套 在 


结构 最 多 可 以 分 为 10 级 。 
【创建 新 组 】 
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2. 编辑 图 层 组 





图 层 组 不 但 可 以 将 多 个 图 层 放 在 一 个 容器 内 











进行 编辑 . 而 且 也 可 以 像 图 层 一 样 进行 
调整 不 透明 度 和 混合 dl 
无 论 图 层 组 中 包括 多 少 图 





编辑 , 例如 


只 要 设置 该 图 层 


组 的 【不 透明 度 】 选 项 . ee 层 组 


中 所 有 图 层 的 不 透明 度 显示 。 
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图 层 组 的 建立 不 仅 能 够 对 多 个 图 层 进行 同时 
操作 ,还 能 够 节约 【图 层 】 面 板 空间 。 只 要 单 击 图 
层 组 前 的 小 三 角 图 标 铀 ， 即 可 折 又 图 层 组 。 
































































































































9 不 .四 四 .外 回合 让 








要 删除 图 层 组 , 可 以 把 要 删除 的 图 层 组 拖 动 至 
【删除 图 层 】 按钮 言 | 上 ， 可 删除 该 图 层 组 及 图 层 
组 中 的 所 有 图 层 ;: 如 果 要 保留 图 层 . 仅 删 除 图 层 组 . 
可 在 选择 图 层 组 后 ， 单 击 【删除 图 层 】 按 钮 | 言 |. 
在 弹出 的 对 话 框 中 单 击 【 仅 组 】 按 钮 即 可 。 





















































IE -至 - 


组 2 及 其 内 容 ， i] I 
WBA) ] 
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应 用 中 . 通常 是 用 一 个 图 层 的 一 部 分 去 遮盖 其 下 面 
的 图 层 。【 正 常 】 模 式 也 是 每 个 图 层 的 默认 模式 。 




















结果 色 











【溶解 】 混 合 模式 的 作用 原理 是 同 底层 的 原始 
颜色 交替 以 创建 一 种 类 似 扩散 抖动 的 效果 , 这 种 效 
果 是 随机 生成 的 。 混 合 的 效果 与 图 层 【 不 透明 度 】 
选项 有 很 大 关系 . 通常 在 【溶解 】 模 式 中 采用 颜色 
或 图 像样 本 的 【不 透明 度 】 参 数值 越 低 .颜色 或 图 
像样 本 同 原始 图 像 像 素 抖 动 的 频率 就 越 高 。 




















不 透明 度 为 50 














天 这 明度 为 8 | 
2. 加 深 模式 

加 深 模式 组 的 效果 是 使 图 像 变 暗 , 两 张 图 像 亚 
加 , 选择 图 像 中 最 黑 的 颜色 在 结果 色 中 显示 。 在 该 
































3.1.3 图 层 的 混合 模式 


在 Photoshop 中 的 各 个 角落 . 都 可 以 看 到 【 混 
合 模式 】 选 项 的 身影 。 混 合 模式 其 实 是 像素 之 间 
的 混合 ， 像 素 值 发 生 改 变 ， 从 而 呈现 不 同 颜色 的 
外 观 。 
1. 组 合 模式 

组 合 模式 主要 包括 【正常 】 和 【溶解 】 选 项 . 
【正常 】 模 式 和 【溶解 】 模 式 的 效果 都 不 依赖 于 其 
他 图 层 ;【 溶 解 】 模 式 出 现 的 噪点 效果 是 它 本 身 形 
成 的 ， 与 其 他 图 层 无 关 。 

【正常 】 混 合 模式 的 实质 是 用 混合 色 的 像素 完 
全 替换 基色 的 像素 , 使 其 直接 成 为 结果 色 。 在 实际 














模式 中 .主要 包括 【 变 暗 】 模 式 .【 正 片 琶 底 】 模 
式 .【 颜 色 加 深 】 模式 、【 线 性 加 深 】 模式 和 【 深 色 】 
模式 。 

口 【 变 暗 】 混 合 模式 ”该 模式 通过 比较 上 下 
层 像 素 后 ， 取 相对 较 暗 的 像素 作为 输出 。 
每 个 不 同 颜色 通道 的 像素 都 会 独立 地 进 
行 比 较 ， 色 彩 值 相对 较 小 的 作为 输出 结 
果 ， 下层 表示 爱 放 次 序 位 于 下 面 的 那个 图 
层 ， 上 层 表示 惨 放 次 序 位 于 上 面 的 那个 
图 层 。 

口 【 正 片 又 底 】 混合 模式 ”该 模式 的 原理 是 ， 
查看 每 个 通道 中 的 颜色 信息 ， 并 将 基色 与 
混合 色 复合 ， 结 果 色 总 是 较 暗 的 颜色 。 任 
何 颜 色 与 白色 混合 保持 不 变 ， 当 用 黑色 或 
白色 以 外 的 颜色 绘画 时 ， 绘 画工 具 绘 制 的 
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连续 描 边 产生 逐渐 变 暗 的 颜色 。 
口 【 颜 色 加 深 〗】 混 合 模式 ”通过 查看 每 个 通 
道中 的 颜色 信息 ， 并 通过 增加 对 比 度 使 基 
变 瞳 以 反映 混合 色 ， 为 【颜色 加 深 〗 混 
合 模式 。 与 白色 混合 后 不 产生 变化 ,【 颜 
色 加 深 】 模 式 对 当前 图 层 中 的 颜色 减少 亮 


【 交 竞 】〗 模 式 对 应 着 【 交 暗 〗 模 式 。 在 【 交 


上 暗 〗 模 式 下 ， 较 亮 的 颜色 区 域 在 最 终 的 结果 
色 中 占 主要 地 位 。 





口 【 滤 色 】 混 合 模式 ”该 模式 的 原理 是 ， 查 


网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 


度 值 ， 这 样 就 可 以 产生 更 明显 的 颜色 
变换 。 

口 【 线 性 加 深 】 混合 模式 ”能 够 查看 颜色 通 
as 
映 混合 色 ， 与 白色 混合 时 不 产生 变 

口 【 深 色 】 混 合 模式 pe 
看 红 、 绿 、 蓝 通道 中 的 颜色 信息 ， 比 较 混 
合 色 和 基色 的 所 有 通道 值 的 总 和 ， 并 显示 


看 每 个 通道 的 颜色 信息 ， 并 将 混合 色 与 基 
色 复 合 ， 结 果 色 总 是 较 亮 的 颜色 。 用 黑色 
过 滤 时 颜色 保持 不 变 ; 用 白色 过 滤 将 产生 
白色 。 就 像 是 两 台 投影 机 打 在 同一 个 屏幕 
上 ， 这 样 两 个 图 像 在 屏幕 上 重 登 起 来 得 到 
一 个 更 亮 的 图 像 。 

口 【 颜 色 减 淡 】 混 合 模式 ”该 模式 是 通过 查 
看 每 个 通道 中 的 颜色 信息 ， 并 通过 增加 对 


比 度 使 基色 变 亮 以 反映 混合 色 ， 与 黑色 混 
合 则 不 发 生变 化 

口 【 线 性 减 淡 】 混 合 模式 ”该 模式 的 工作 原 
理 是 ， 查 看 每 个 通道 的 颜色 信息 ， 并 通过 
增加 亮度 使 基色 变 亮 以 反映 混合 色 。 同 
时 ， 与 黑色 混合 不 发 生变 化 。 

口 【 浅 色 】 混 合 模式 ”该 模式 分 别 检测 红 、 
绿 、 蓝 通道 中 的 颜色 信息 ， 比 较 混合 色 和 
基色 的 所 有 通道 值 的 总 和 并 显示 值 较 大 
的 颜色 。“ 浅 色 " 不 会 生成 第 三 种 颜色 ， 因 
为 它 将 从 基色 和 混合 色 中 选择 最 大 的 通 
道 值 来 创建 结果 颜色 。 


色 值 较 小 的 颜色 。【 深 色 】〗】 模 式 不 会 生成 





第 三 种 颜色 ， 因 为 它 将 从 基色 和 混合 色 中 
选择 最 小 的 通道 值 来 创建 结果 颜色 。 











3. 减 淡 模 式 
减 淡 模式 与 加 深 模式 是 相对 应 的 。 使 用 减 淡 模 
式 时 , 黑色 完全 消失 , 任何 比 黑色 亮 的 区 域 都 可 能 
加 亮 下 面 的 图 像 。 该 类 型 的 模式 主要 包括 
模式 .【 滤 色 】 模 式 .、【 颜 色 减 淡 】 模 式 .【 线 性 减 
淡 】 模 式 和 【 浅 色 】 模 式 。 
口 【 变 亮 】 混 合 模式 ”该 模式 是 通过 查看 每 
个 通道 中 的 颜色 信息 ， 并 选择 基色 或 混合 
色 中 较 亮 的 颜色 作为 结果 色 。 比 混合 色 瞳 
的 像素 被 葵 换 ， 比 混合 色 竞 的 像素 保持 ”4 ， 对 比 模式 组 


对 比 模式 组 综合 了 加 深 和 减 淡 模式 的 特点 ,在 
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进行 混合 时 ,50% 的 灰色 会 完全 消失 .任何 高 于 亮 的 像素 。 如 果 混 合 色 比 50% 灰 色 暗 ， 则 
50% 灰 色 的 区 域 都 可 能 加 亮 下 面 的 图 像 : 而 低 于 替换 比 混合 色 竞 的 像素 ， 而 比 混合 色 暗 的 
50% 灰 色 的 区 域 都 可 能 使 底层 图 像 变 暗 . 从 而 增加 像素 保持 不 变 。 

图 像 的 对 比 度 。 该 类 型 模式 主要 包括 【 登 加 】 模式 、 口 【 实 色 混 合 】 混 合 模式 ”该 模式 是 将 混合 
【和 柔 光 】 模 式 、【 强 光 】 模 式 .【 亮 光 】 模 式 、【 线 性 颜色 的 红色 、 绿 色 和 蓝 色 通道 值 添加 到 基 
光 】 模 式 .、【 点 光 】 模 式 和 【 实 色 混合 】 模 式 。 色 的 RGB 值 。 如 果 通 道 的 结果 总 和 大 于 

口 【 叠 加】 混合 模式 ”该 模式 是 对 颜色 进行 或 等 于 255， 则 值 为 255; 如 果 小 于 255， 
正片 登 底 或 过 滤 ， 具 体 取 决 于 基色 。 图 案 则 值 为 0。 


或 颜色 在 现 有 像素 上 县 加 ， 同 时 保留 基色 
的 明暗 对 比 。 不 替换 基色 ， 但 基色 与 混合 
色 互相 混合 以 反映 颜色 的 亮度 或 暗 度 。 

口 【 柔 光 】 混 合 模式 ”该 模式 会 产生 一 种 柔 
光照 射 的 效果 ， 此 效果 与 发 散 的 聚光灯 照 
在 图 像 上 相似 。 如 果 混 合 色 颜色 比 基 色 颜 

色 的 像素 更 亮 一 些 ， 那 么 结果 色 将 更 亮 
如 昭雪 
， 那 么 结果 色 颜 色 将 更 暗 ， 使 图 像 的 

元 度 反差 增 大 大 

口 【 强 光 】 混 合 模式 ”该 模式 的 作用 原理 是 ， 
复合 或 过 滤 颜 色 ， 具 体 取 决 混合 色 。 此 效 
果 与 耀眼 的 聚光灯 照 在 图 像 上 相似 。 

口 【亮光 】 混 合 模式 ”该 模式 通过 增加 或 减 
小 对 比 度 来 加 深 或 碱 淡 颜色 ， 具体 取 决 于 
混合 色 。 如 果 混 合 色 (光源 ) 比 50% 灰 色 5 比较 模式 组 
亮 ， 则 通过 减 小 对 比 度 使 图 像 变 亮 ; 如 果 比较 模式 组 主要 是 【 差 值 】 模 式 和 【排除 】 模 


六 必 色 地 50% 友 色 也 ， 则 通过 培 加 对 比 度 。 式 。 这 两 种 模式 很 相似 , 它们 将 上 层 和 下 面 的 图 像 
Pa 进行 对 较 .寻找 二 者 中 完全 相同 的 区 域 .使 相同 的 
显示 而 所 有 不 相同 的 区 域 则 显示 
口 【 线 性 光 】 混合 模式 该 楼 式 是 通过 总 小 皮下 内 六 和 和 A 
i 二 来 加: 于 志波 法 记 > 太后 从 纹 彬 巴 。 
i 口 【 差 值 】 混 合 模式 “通过 查看 每 个 通道 中 
于 混合 色 。 如 采 混 合 名 《光源 ) 比 5096 大 a 


【 实 色 混合 】〗 模 式 的 实质 ， 是 将 图 像 的 颜色 
由 灰色 图 像 转换 为 黑白 位 图 。 






































台大 六 通 村 二 加 先 民 公国 人 雪 完 s 因 条 从 混合 色 中 减 去 基色 ， 具体 取决 于 哪 一 个 
混合 色 比 50% 灰 色 瞳 ， 出 通过 六 让 \ 亮 度 使 颜色 的 亮度 值 更 大 。 与 白色 混合 将 反 转 基 

图 像 朗 咕 * 色 值 ， 与 黑色 混合 则 不 产生 变化 。 
口 【点 光 】 混 合 模式 ”该 模式 的 原理 是 ， 根 口 【 排 除 】 混 合 模式 ”主要 用 于 创建 一 种 与 
混合 色 蔡 换 颜 色 ， 具 体 取决 于 混合 色 。 【 差 值 】 模 式 相似 ， 但 对 比 度 更 低 的 效果 。 
如 果 混合 色 (光源 ) 比 5096 灰 色 亮 ， 则 符 与 白色 混合 将 反 转 基色 值 ， 与 黑色 混合 则 


换 比 混合 色 暗 的 像素 ， 而 不 改变 比 混合 色 不 发 生变 化 。 
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口 【 减 去 】 模式 ”通过 查看 每 个 通道 中 的 大 
色 信息 ， 并 从 基色 中 减 去 混合 色 -【 减 去 】 
模式 通过 查看 每 个 通道 中 的 颜色 信息 ， 并 
从 基色 中 减 去 混合 色 。 

口 【 划 分 】 模 式 ”通过 查看 每 个 通道 中 的 大 
色 信 息 ， 并 从 基色 中 分 割 混合 色 。 





Ne 
6. 色彩 模式 组 
色彩 模式 组 主要 包括 【色相 】 模 式 、【 饱 和 度 】 
模式 .【 颜 色 】 模 式 和 【明度 】 模 式 。 这 些 模式 在 
混合 时 , 与 色相 、 饱 和 度 和 亮度 有 密切 关系 。 将 上 








面 图 层 中 的 一 种 或 两 种 特性 应 用 到 下 面 的 图 像 中 
产生 最 终 效果 。 

口 【色相 】 混 合 模式 ”该 模式 的 原理 是 ， 用 
基色 的 明亮 度 和 饱和 度 以 及 混合 色 的 色 
相 创 建 结果 色 。 

口 【 饱 和 度 】 混 合 模式 ”该 模式 是 用 基色 的 
明亮 度 和 色相 ， 以 及 混合 色 的 饱和 度 创建 
结果 色 。 

口 【颜色 】 混 合 模式 ”该 模式 是 用 基色 的 明 
亮度 ， 以 及 混合 色 的 色相 和 饱和 度 创建 结 
果 色 。 这 样 可 以 保留 图 像 中 的 灰 阶 ， 并 且 
对 于 给 单 色 图 像 上 色 和 给 彩色 图 像 着 色 
都 会 非常 有 用 。 

口 【明度 】 混 合 模式 ”该 模式 是 用 基色 的 色 
相 和 饱和 度 ， 以 及 混合 色 的 明亮 度 创建 结 
果 色 。 这 种 模式 可 将 图 像 的 亮度 信息 应 用 
到 下 面 图 像 中 的 颜色 上 。 它 不 能 改变 颜 
色 ， 也 不 能 改变 颜色 的 饱和 度 ， 而 只 能 改 
变 下 面 图 像 的 亮度 。 



































3.1.4 图 层 样式 


Photoshop 提供 了 10 种 可 供 选择 的 样式 , 通过 
这 些 样 式 可 以 为 图 像 添 加 一 种 或 多 种 效果 。 图 层 样 
式 类 似 于 模板 ,可 以 重复 使 用 , 也 可 以 像 操作 图 层 
一 样 对 其 进行 调整 复制 、 删 除 等 操作 。 
1. 设置 图 层 样式 

执行 【图 层 】|【 图 层 样式 】 命 令 ， 在 弹出 的 
级 联 菜单 中 选择 相应 的 选项 , 在 弹出 的 【图 层 样式 】 
对 话 框 中 , 设置 样式 选项 , 单 击 【 确 定 】 按 钮 即 可 
应 用 相应 的 样式 。 
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除了 使 用 内 置 的 图 层 样式 之 外 . 用户 还 可 以 通 
过 单 击 【 图 像样 式 】 对 话 框 中 的 【新 建 样式 】 按 钮 ， 
在 弹出 的 【新 建 样式 】 对 话 框 中 ,设置 样式 名 称 ， 
单 击 【 确 定 】 按 钮 . 即 可 在 【样式 】 库 中 显示 新 建 
样式 。 
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2. 修改 与 复制 图 层 样式 

在 进行 图 形 设计 过 程 中 . 经常 遇 到 多 个 图 层 使 
用 同一 个 样式 , 或 者 需要 将 已 经 创建 好 的 样式 . 从 
当前 图 层 移动 到 另外 一 个 图 层 上 去 的 情况 。 

当 需 要 将 样式 效果 从 一 个 图 层 复制 到 另 一 个 
图 层 中 时 ,选择 包含 样式 的 图 层 , 按 住 Alt 键 的 同 
时 拖 动 到 另 一 个 图 层 中 ， 松 开 鼠 标 即 可 。 











而 当 用 户 需 要 将 一 个 样式 效果 转移 到 另外 一 
个 图 层 中 时 ,只 需要 拖 动 样式 到 另 一 个 图 层 中 . 松 
开 鼠 标 即 可 将 样式 转移 到 另 一 个 图 层 中 。 








3. 缩放 样式 效果 

在 使 用 图 层 样式 时 .有些 样式 可 能 已 针对 目标 
分 辨 率 和 指定 大 小 的 特写 进行 过 微调 . 这 样 一 来 便 
有 可 能 产生 应 用 样式 的 结果 与 样本 的 效果 不 一 致 
的 现象 。 

此 时 . 用 户 需要 单独 对 效果 进行 缩放 , 才能 得 
到 与 图 像 比例 一 致 的 效果 。 选择 图 像 所 在 图 层 , 执 
行 【 图 层 】| 【图 层 样 式 】|【 缩 放 效果 】 命 令 。 在 
弹出 的 【缩放 图 层 效果 】〗 对 话 框 中 , 设置 样式 的 缩 
放 比 例 参 数 与 图 像 缩放 相同 ， 单 击 【 确 定 】 按 钮 
即 可 。 








EE 绘制 与 修复 图 像 





由 于 Photoshop 是 图 像 处 理 软件 . 所 以 其 提供 
了 10 多 种 专门 用 于 修饰 和 修复 问题 照片 的 工具 . 
它们 可 对 一 些 破损 或 有 污点 的 图 像 进行 精确 而 全 
面 的 修复 。 








画笔 工具 


【画笔 工具 】[ 人 J 可 以 在 画布 中 绘制 当前 的 前 景 
色 。 选 择 工具 箱 中 的 【画笔 工具 】[4 后 . 即 可 像 


3.2.1 
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使 用 真正 的 画笔 在 纸 上 作 画 一 样 . 在 空白 画布 或 者 
图 像 上 进行 绘制 。 
1. 画笔 类 型 
选取 【画笔 工具 】 世 E 双 ， 在 文档 空白 处 右 击 . 
在 弹出 的 【画笔 预 设 】 选 取 器 中 ,可 以 选择 画笔 的 
【 主 直径 】、【 硬 度 】 以 及 【画笔 预 设 形状 】。 在 
Photoshop 中 , 画笔 的 类 型 可 分 为 硬 边 画 笔 、 软 边 
画笔 以 及 不 规则 形状 画笔 。 
口 硬 边 画笔 : 这 类 画笔 绘制 出 的 线条 不 具有 
柔和 的 边缘 ， 它 的 【硬度 〗 值 为 100%。 
口 软 边 画笔 : 这 类 画笔 绘制 出 的 线条 具有 有 柔 
口 不 规则 形状 画笔 : 使 用 这 类 画笔 ， 可 以 产 
生 类 似 于 喷发 、 喷 射 或 爆炸 的 效果 。 























硬 边 画 笔 不 规则 画笔 





当选 择 工具 箱 中 的 【画笔 工具 】[ 思 后 .在 文 
档 中 右 击 , 即 可 弹出 一 个 【画笔 预 设 】 选 取 器 。 在 
该 选取 器 中 可 以 设置 画笔 的 【 主 直 径 】 及 【硬度 】 
的 参数 大 小 。 





























创建 新 预 
设 笔触 

















2. 绘画 模式 
绘图 模式 的 作用 是 .设置 绘画 的 颜色 与 下 面 的 
现 有 像素 混合 的 方法 . 而 产生 一 种 结果 颜色 的 混合 
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模式 。 混 合 模 式 将 根据 当前 选 定 工具 的 不 同 而 变 
化 . 其 中 . 绘图 模式 与 图 层 混合 模式 类 似 。 只 要 给 
制 之 前 ， 在 工具 选项 栏 中 设置 【绘画 模式 】 选 项 ， 
即 可 得 到 不 同 的 绘画 效果 。 

















Cee 
闫 色 加 深 模式 | 





| 正常 模式 | 





3. 不 透明 度 

【不 透明 度 】 选 项 是 指 绘图 应 用 颜色 与 原 有 底 
色 的 显示 程度 , 在 【不 透明 度 】 选 项 中 ,可 以 设置 
从 1 一 100 的 整数 决定 不 透明 度 的 深浅 ， 或 者 单 击 
下 拉 列 表 框 右 侧 的 小 三 角 按 钮 ， 拖 动 滑 块 进行 调 
整 , 或 者 直接 在 文本 框 中 输入 数值 。 














不 迁 明 度 为 80% | 


不 延明 度 为 20% 








4. 画笔 流量 

【流量 】 选 项 是 设置 当 将 指针 移动 到 某 个 区 域 
上 方 时 应 用 颜色 的 速率 。 在 某 个 区 域 上 方 进行 绘画 
时 ,如果 按 住 鼠 标 左 键 不 放 , 那么 颜色 量 将 根据 流 
动 速率 增 大 ,直至 达到 不 透明 度 设置 。 




















E39 匡 e 可 
表笔 流量 连 率 80% 表笔 流量 连 率 20% 





5. 喷枪 功能 

使 用 【喷枪 】 功 能 模拟 绘画 , 需要 将 指针 移动 
到 某 个 区 域 上 方 时 , 如 果 按 住 鼠标 左 键 不 放 . 颜料 
量 将 会 增加 。 其 中 . 画笔 硬度 、 不 透明 度 和 流量 选 
项 可 以 控制 应 用 颜料 的 速度 和 数量 。 例 如 , 使 用 湿 
介质 画笔 ， 单 击 【 喷 枪 】 按 钮 回 ， 在 某 一 区 域 单 
击 , 每 单 击 一 次 颜料 量 将 会 增加 , 直到 不 透明 度 达 
到 100%。 


























Ee | Re 
单 击 1 次 效果 | 单 击 10 次 效果 

















当选 择 【 二 笔 工具 】〗[ 扣 后， 在 工具 选项 栏 
中 新 增 了 【绘图 板 压力 控制 大 小 】〗 与 【绘图 
板 压力 控制 不 透明 度 】 两 个 按钮 ， 这 两 个 工 
具 是 在 使 用 绘图 板 时 ,用 来 改变 笔触 的 大 小 
与 不 透明 度 设置 的 。 





3.2.2 图章 工具 


在 修复 图 像 工具 中 【仿制 图 章 工具 ][ 世 ] 和 [图 
案 图 章 工 具 】 区 都 是 利用 图 章 工具 进行 绘画 。 其 
中 , 前 者 是 利用 图 像 中 某 一 特定 区 域 工作 . 后 者 是 
利用 图 案 工 作 。 
1. 仿制 图 章 工具 

【仿制 图 章 工具 】[ 邓 ] 类 似 于 一 个 带 有 扫描 和 复 
印 作用 的 多 功能 工具 . 它 能 够 按 涂抹 的 范围 复制 全 
部 或 者 部 分 到 一 个 新 的 图 像 中 , 它 可 创建 出 与 原 图 
像 完全 相同 的 图 像 。 方法 是 : 选择 【仿制 图 章 工具 】 
区 ] 后 ， 按 住 Alt 键 在 图 像 的 某 个 位 置 单 击 ， 进 行 
取样 。 

然后 将 光标 指向 其 他 区 域 时 . 光标 中 会 显示 取 
样 的 图 像 。 进 行 涂抹 时 . 能 够 按照 取样 源 的 图 像 进 
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工具 选项 栏 中 的 【对 齐 】 选 项 ， 用 来 控制 像素 


取样 的 连续 性 。 当 启用 该 选项 后 , 即使 释放 鼠标 按 
钮 , 也 不 会 丢失 当前 取样 点 ,可 以 连续 对 像素 进行 


取样 。 
y = 


如 果 禁 用 【对 齐 】 选 项 . 则 会 在 每 次 停止 并 重 
新 开始 绘制 时 .使 用 初始 取样 点 中 的 样本 像素 。 
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从 而 给 人 以 视觉 享受 。 
1. 油漆 桶 工具 

【油漆 桶 工具 】 国 | 是 进行 单 色 填充 和 图 案 填充 
的 专用 工具 . 与 【填充 】 命 令 相似 。 选 择 【 油 漆 桶 
工具 】 国 | 后 . 在 工具 选项 栏 中 ， 选 择 【 填 充 区 域 
的 源 】 选 项 。 然 后 在 画布 中 单 击 ， 即 可 得 到 填充 











2. 图 案 图 章 工具 

【图 案 图 章 工具 】 芭 j 可 以 利用 图 案 进 行 绘画 。 
选择 该 工具 后 , 单 击 工具 选项 栏 中 的 【图 案 】 拾 色 
器 。 在 弹出 的 对 话 框 中 ,可 以 选择 各 种 图 案 。 然 后 





在 画布 中 涂抹 . 


效果 。 





























即 可 填充 图 案 。 











在 【图 案 图 





象 派 效 果 】 选 项 后 , 可 使 仿制 的 图 案 产生 涂抹 混合 


的 效果 。 





3.2.3 填充 工具 


















































章 工 具 】 芭 选项 栏 中 ， 启 用 【 印 









































































































































































































































































































































Photoshop 中 有 【渐变 工具 】| 瑟 ] 和 【油漆 桶 工 





























具 】[ 加 两 种 填充 工具 ， 它 们 的 主要 作用 是 赋予 物 “2 渐变 工具 
体 颜色 。 通 过 对 物体 颜色 的 填充 .使 物体 更 加 生动 【渐变 工具 ] 加 j 可 以 创建 两 种 或 者 两 种 以 上 颜 
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色 间 的 逐渐 混合 。 选 择 【 渐 变 工具 】[ 加 |， 系 统 将 ”还 可 以 自 定义 渐变 颜色 来 创建 渐变 效果 。 在 【渐变 
在 工具 选项 栏 中 显示 渐变 工具 参数 , 在 此 设置 各 项 ” 工具 】 选 项 栏 中 单 击 渐变 条 . 即 可 打开 该 对 话 框 。 
参数 。 然 后 , 在 图 像 中 按 下 并 拖 动 鼠标 . 当 拖 动 至 
另 一 位 置 后 释放 鼠标 即 可 在 图 像 (或 者 选取 范围 
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而 色 | 有 ”to: 回 删除 (D) ] 

















-| 

其 中 A 为 面板 菜单 ，B 为 不 透明 度 色 标 ，C 
为 调整 值 或 删除 选中 的 不 透明 度 或 色 标 ，D 为 中 
点 ， 上 E 为 色 标 . 为 色 标 颜色 或 位 置 的 调整 。 














填充 颜色 时 ， 若 按 下 Shift 键 ， 则 可 以 按 








45”、 水 平 或 重 直 的 方向 填充 颜色 。 


除了 可 以 使 用 系统 默认 的 渐变 颜色 填充 以 外 ， 


天 届 使 用 路 径 效果 


路 径 是 位 图 编辑 软件 中 的 矢量 工具 . 使 用 路 径 
中 的 各 种 工具 能 够 创建 出 可 以 任意 放大 与 缩小 的 
矢量 路 径 , 不 仅 能 够 绘制 出 各 种 形状 的 图 形 . 还 可 
以 为 轮廓 复杂 的 图 像 创 建 路 径 边缘 。 


3.3.1 钢笔 工具 


【钢笔 工具 ] [加 是 建立 路 径 的 基本 工具 使 用 到 
该 工具 可 以 创建 直线 路 径 和 曲线 路 径 , 还 可 以 创建 2， 创建 曲线 路 径 


















































封闭 式 路 径 。 使 用 【钢笔 工具 】[ 全 J 在 画布 中 单 击 A 点. 然 
1. 创建 直线 路 径 后 到 B 点 单 击 并 同时 拖 动 ， 释放 和 鼠标 后 即 可 建立 


在 空 自 画 布 中 ,选择 工 具 箱 中 的 【钢笔 工具 】 ”曲线 路 径 。 ， 
[到 ， 启 用 工具 选项 栏 中 的 【路 径 】 功 能 。 在 画布 ”3 创建 封闭 式 路 径 
中 连续 单 击 ， 即 可 创建 直线 段 路 径 ， 而 【路 径 】 面 使 用 【钢笔 工具 】[ 怠 ]， 在 画布 中 单 击 A 点 作 
板 中 出 现 工作 路 径 。 为 起 始点 。 然 后 分 别 单 击 B 点 和 C 点 后 ,指向 起 
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始点 (A 点 )， 这 时 钢笔 工具 指针 右 下 方 会 出 现 一 
个 小 圆圈 。 单 击 后 ， 形 成 封闭 式 路 径 。 
































当局 用 工具 选项 栏 中 的 【橡皮 带 】 选 项 时 ， 
可 以 在 移动 指针 时 预览 两 次 单 击 之 间 的 路 
径 段 。 而 无 论 是 直线 路 径 ， 还 是 曲线 路 径 ， 
使 用 相同 的 方法 ， 均 能 够 创建 封闭 式 路 径 。 





3.3.2 自由 钢笔 工具 


【 自 








钢笔 工具 】 

















[中] 不 是 通过 设置 节点 来 建立 


路 径 , 而 是 通过 自由 手绘 曲线 建立 路 径 , 例如 水 纹 
等 曲线 路 径 。 
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线 拟 合 】 选 项 . 用 来 控制 自动 添加 锚 点 的 数量 。 其 
参数 范围 为 0.5 像素 一 10 像素 。 参 数值 越 高 , 创建 
的 路 径 锚 点 越 少 ， 路 径 越 简 单 。 


























3.3.3 几何 图 路 径 


常见 的 几 种 几何 图 形 , 在 Photoshop 工具 箱 中 
均 能 够 找到 现 有 的 工具 。 通过 设置 每 个 工具 中 的 参 
数 , 还 可 以 变换 出 不 同 的 效果 。 
1. 矩形 

使 用 【和 矩形 工具 】[ 届 ] 可 以 绘制 矩形 、 正 方形 
的 路 径 。 其 方法 是 : 选择 【和 矩形 工具 】[ 辟 ]， 在 画 
布 任意 位 置 单 击 作为 起 始点 , 同时 拖 动 鼠标 , 随 着 
光标 的 移动 将 出 现 一 个 矩形 框 。 
































EE | 






































在 【和 矩形 工具 】[ 忆 4 选项 栏 上 单 击 【 几 何 选项 】 
按钮 [ 划 ]， 弹 出 一 个 选项 面板 。 黑 认 启用 的 是 【不 








在 【自由 钢笔 工具 】[ 闪 选项 栏 中 . 单 击 【 几 


何 选项 】 

















按钮 长]， 在 弹出 的 选项 面板 中 选择 【 曲 





受 约束 】 选 项 ， 而 其 他 选项 如 下 所 述 。 
口 方形 启用 该 选项 后 ， 在 绘制 矩形 路 径 
时 ， 可 以 绘制 正方 形 路 径 。 


口 固定 大 小 ”启用 该 选项 ， 可 以 激活 右 侧 的 
参数 栏 。 在 参数 栏 文本 框 中 输入 相应 的 数 
值 ， 能 够 绘制 出 固定 大 小 的 矩形 路 径 。 
口 比例 启用 该 选项 , 能 够 在 激活 右 侧 的 参 
数 文本 框 中 输入 相应 的 数值 ， 来 控制 矩形 
路 径 的 比例 大 小 。 
口 从 中 心 ”启用 该 选项 ， 可 以 绘制 以 起 点 为 
中 心 的 矩形 路 径 。 
2. 圆 角 矩形 工具 
【 贺 角 矩形 工具 】 昌 ,| 能够 绘制 出 具有 贺 角 的 矩 
形 路 径 。 该 工具 的 选项 与 【矩形 工具 】〗】[ 昌 唯一 的 
不 同 就 是 ， 前 者 具有 【半径 】 选 项 。 
该 选项 默认 的 参数 为 10 像素 ， 其 参数 值 范围 
为 0 一 1000 像素 。 通过 设置 半径 的 大 小 , 可 以 绘制 
出 不 同 的 圆 角 和 矩形 路 径 。 而 在 圆 角 和 珑 形 选项 栏 中 ， 
设置 越 来 越 大 的 半径 数值 , 得 到 的 圆 角 和 矩形 越 接 近 
正 圆 。 
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3. 椭圆 路 径 

【椭圆 工具 】[@J 用 于 建立 椭圆 (包括 正 圆 ) 的 
路 径 。 其 方法 是 , 选择 该 工具 .在 画布 任意 位 置 单 
击 . 同时 拖 动 鼠标 , 随 着 光标 的 移动 出 现 一 个 椭圆 
形 路 径 。 
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4. 多 边 形 工具 

【多 边 形 工具 ]】 [号 能 够 绘制 等 边 多 边 形 , 例如 
等 边 三 角形 、 五 角 星 和 星 形 等 。Photoshop 默认 的 
多 边 形 边 数 为 5， 只 要 在 画布 中 单 击 并 拖 动 鼠标 . 
即 可 创建 等 边 五 边 形 路 径 。 














局 LE [sw [zj| 钙 忆 光 | 奈 过 [5| 








~、 > 
SS J 
he 
- 
在 该 工具 选项 栏 中 ， 可 以 设置 多 边 形 的 边 数 ， 
其 范围 是 3 一 100。 多 边 形 边 数 越 大 ， 越 接近 于 
正 圆 。 








有 


单 击 该 工具 选项 栏 中 的 【几何 选项 】 按 钮 [ 尊 ]， 
在 弹出 的 面板 中 . 可 以 设置 各 种 选项 参数 , 来 建立 


| 














不 同 效果 的 多 边 形 路 径 。 
口 半径 ”通过 设置 该 选项 ， 可 以 固定 所 绘制 
多 边 形 路 径 的 大 小 ， 参 数 范围 是 1 一 150 
000px。 


口 平滑 拐角 或 平滑 缩 进 ”用 平滑 扬 角 或 缩 
进 泻 染 多 边 形 。 
口 星 形 启用 该 选项 ， 
边 形 。 
5. 直线 工具 
【直线 工具 】[ZJ 既 可 以 绘制 直线 路 径 . 


能 够 绘制 星 形 的 多 


也 可 以 
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绘制 箭头 路 径 。 直线 路 径 的 绘制 方法 与 矩形 路 径 相 
似 , 只 要 选中 该 工具 后 , 在 画布 中 单 击 并 拖 动 鼠标 
即 可 ,而 直线 路 径 的 粗细 , 则 是 通过 选项 栏 中 的 [ 粗 
细 】 选 项 来 决定 的 。 

打开 该 工具 的 选项 面板 , 其 中 的 选项 能 够 设置 
直线 的 不 同 箭头 效果 。 其 中 ,绘制 直线 路 径 时 , 同 
时 按 住 Shift 键 可 以 绘制 出 水 平 、 垂 直 或 者 43” 的 
直线 路 径 。 

























































































3.3.4 “形状 路 径 


用 户 可 以 使 用 工具 箱 中 的 【 自 定形 状 工具 】 
[ 巧 ]， 来 建立 几何 路 径 以 外 的 复杂 路 径 。Photoshop 
内 置 了 大 约 250 多 种 形状 , 包括 星星 、 脚印 与 花朵 
等 各 种 符号 化 的 形状 。 除 了 使 用 内 置 形状 之 外 . 用 
户 还 可 以 自 定义 喜欢 的 图 像 为 形状 路 径 , 以 方便 重 
复 使 用 。 
1. 预 设 形状 路 径 

选择 【 自 定形 状 工具 】[ 巷 |， 在 工具 选项 栏 中 
单 击 【形状 】 右 侧 的 下 拉 按 钮 3。 在 打开 的 【定义 
形状 】 拾 色 器 中 , 选择 形状 图 案 . 即 可 在 画布 中 建 
立 该 图 案 的 路 径 。 
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单 击 拾 色 器 右上 角 的 下 拉 按钮 , 在 打开 的 关联 
菜单 中 , 既 可 以 设置 图 案 的 显示 方式 . 也 可 以 载 入 
预 设 的 图 案 形状 。 

2. 自 定义 形状 路 径 

在 画布 中 创建 路 径 后 , 执行 【编辑 】|【 定 义 
自 定形 状 】 命 令 . 在 弹出 的 【形状 名 称 】 对 话 框 中 
直接 单 击 【 确 定 】 按 钮 . 即 可 将 其 保存 到 【 自 定形 
状 】 拾 色 器 中 。 











加 绘制 





















































自 定义 形状 路 径 后 , 在 【 自 定形 状 】 拾 色 器 中 
选择 定义 好 的 形状 ， 即 可 建立 该 形状 的 路 径 。 
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无 论 在 何 种 视觉 媒体 中 .文字 和 图 片 都 是 其 两 
大 构成 要 素 。Photoshop 提供 了 强大 的 文字 工具 ， 
它 允 许 用 户 在 图 像 背 景 上 制作 复杂 的 文字 效果 。 可 
以 随意 地 输入 文字 、 字 母 、 数 字 或 符号 等 . 同时 还 
可 以 对 文字 进行 各 种 变换 操作 。 


3.4.1 创建 文本 


Photoshop 中 共有 4 种 处 理 文本 工具 .用 户 根 
据 文字 显示 的 不 同 , 可 以 使 用 不 同 的 文本 工具 进行 
输入 或 修改 文本 。 
1. 横 排 文 字 与 直 排 文字 

横 排 文 字 和 直 排 文字 的 创建 方式 相同 ,在 工具 
箱 中 选择 【 横 排 文字 工具 】[ 工 ]， 单 击 画 布 ， 在 光 

















标 处 输入 文字 即 可 。 输 入 完成 后 ， 按 快捷 键 
Ctrl+Enter 可 退出 文本 输入 状态 。 

输入 文字 时 , 用 户 可 在 工具 选项 栏 中 设置 文字 
属性 ， 例 如 字体 、 





大 小 、 颜 色 等 。 







文本 的 颜色 是 由 工具 箱 中 的 【前 录 色 】 来 决 
定 的 ， 可 用 在 输入 之 前 设置 好 【前 景色 】〗 闫 
色 值 ， 直 接 得 到 相应 的 文本 颜色 。 
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当 用 户 需要 输入 坚 排 文字 时 . 在 工具 箱 中 选择 
【 直 排 文字 工具 】[ 开 ]. 单 击 画布 . 在 光标 处 输入 文 
字 即 可 。 
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2. 文字 选区 

使 用 工具 箱 中 的 【 横 排 文字 蒙 版 工具 】[ 于 | 和 
【 直 排 文字 蒙 版 工具 】[EE， 可 以 创建 文字 型 选区 ， 
它 的 创建 方法 和 创建 文字 一 样 。 

使 用 文本 工具 组 中 的 【 横 排 文 字 蒙 版 工具 ]LEJ 和 
【 直 排 文字 蒙 版 工具 】[ 于 |， 可 以 创建 文本 选区 ,并且 
在 选区 中 填充 颜色 后 ， 从 而 得 到 文本 形状 的 图 


‘HAPPY 


当 使 用 【 横 排 文 字 莹 版 工具 】〗】[ 玉 ] 或 者 【 直 
排 文字 荣 版 工具 】〗[ 于 | 在 画布 中 单 击 后 ， 就 
会 进入 文本 蒙 版 模式 。 输 入 文字 后 ， 按 快捷 
键 CtrltEnter, 将 文字 蒙 版 转换 为 文字 选区 。 























起 























得 到 文字 选区 后 . 除了 能 够 填充 颜色 外 . 还 可 
以 像 普通 选区 一 样 . 对 文字 选区 进行 渐变 填充 、 描 
边 、 修 改 及 调整 边缘 等 操作 。 





使 用 【 横 排 文字 蒙 版 工具 】 

字 蒙 版 工具 】〗[ 于 | 在 当前 图 层 中 添加 文字 时 ， 
不 会 产生 新 的 图 层 , 而 且 文字 是 未 填充 任何 
颜色 的 选区 。 
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页 制作 与 网 站 
2. 设置 段落 文本 的 对 齐 方 式 
HY PPPY 当 出 现 大 量 文本 时 ,最 常用 的 就 是 使 用 文本 的 
对 齐 方式 进行 排版 。[【 段 落 】 面 板 中 的 【 左 对 齐 文 
本 】 围 【居中 对 齐 文本 】 国 和 【 右 对 齐 文本 】 
是 所 有 文字 排版 中 三 种 最 基本 的 对 齐 方式 , 它 是 以 


HA 人 2Y 文字 宽度 为 参照 物 使 文本 对 齐 。 
人 @@ 光 对 充 ] 充 
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图 调整 边缘 在 阳光 中 微笑 ， Ce 
在 春雨 中 长 。 园 码 码 | 
几 流 加 
3.4.2 创建 段落 文本 而 【最 后 一 行 左 对 齐 】 国 、【 最 后 一 行 居中 对 





在 文字 排版 中， 如 果 要 编辑 大 量 的 文字 内 容 。， 齐 】 园 和 【最 后 一 行 右 对 齐 】 转 征 以 文本 本 的 宽 
就 需要 更 多 针对 段落 文本 方面 的 设置 ,以 控制 文字 。 度 为 参展 作文 本 对 齐 。【 全 部 对 齐 ] 国 是 所 有 广 
对 齐 方式 、 段落 与 段落 之 间 的 距离 等 内 容 , 这 时 就 ”本 行 均 按 照 文本 框 的 宽度 左右 强迫 对 齐 。 


需要 创建 文本 框 .并 使 用 【段落 ] 面板 对 文本 框 中 3， 设置 缩 进 
大 量 的 文本 内 容 进行 调整 。 【 左 缩 进 】 选 项 可 以 从 边界 框 左边 界 开始 缩 进 


1. 创建 文本 框 整个 段落 :【 右 缩 进 】 选 项 可 以 从 边界 框 右边 界 开 
使 用 任何 一 个 文本 工具 都 可 以 创建 出 段落 文 ” 始 缩 进 整 个 段落 。【 首 行 缩 进 】 选 项 与 【 左 缩 进 】 
本 ,选择 工具 后 直接 在 图 像 中 单 击 并 拖 动 鼠标 , 创 ” 选项 类 似 ,只 不 过 是 【 首 行 缩 进 】 选 项 只 缩 进 左边 
建 出 一 个 文本 框 . 然后 在 其 中 输入 文字 即 可 。 文字 ” 界 第 一 行文 字 。 
延伸 到 文本 框 的 边缘 后 将 自动 换行 , 拖 动 边框 上 的 
8 个 节点 可 以 调整 文本 框 大 小 。 如 果 文 本 框 过 小 而 
无 法 全 部 显示 文字 时 . 拖 动 控制 节点 调整 文本 框 的 
大 小 ， 显 示 所 有 的 文字 。 
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执行 【图 层 】| 【文字 】〗”| 【转换 为 点 文本 】 a 吕 
命令 或 【图 层 】| 【文字 】| 【转换 为 段 范文 | 3.4.3 修改 文字 外 观 


本 】〗 命 令 可 将 点 文本 与 段落 文本 互相 转换 。 

















在 进行 设计 创作 时 ， 可 以 通过 变形 文字 . 


Exy 








文本 转换 为 路 径 和 形状 ， 以 便 对 文字 做 出 更 特殊 
美观 的 效果 。 例 如 杂志 设计 、 宣 传 册 或 平面 广 
告 等 。 
1. 文字 变形 

输入 文本 后 . 单 击 文本 工具 选项 栏 中 的 【创建 
文字 变形 】 按 钮 三 |， 在 弹出 的 【变形 文字 】 对 话 
框 中 ， 能够 进行 15 种 不 同 的 形状 变形 。 
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而 选择 的 变形 样式 将 作为 文字 图 层 的 一 个 属 
性 , 可 以 随时 更 改 图 层 的 变形 样式 以 更 改变 形 文字 
的 整体 效果 。 


当 文字 图 层 中 的 文字 执行 了 【〖 仿 粗 体 】 命 令 











了 时 ， 不 能 使 用 【创建 文字 变形 】 命 令 区 ]。 








2. 文本 转 路 径 

如 果 要 在 改变 文字 形状 的 同时 . 保留 图 形 清 
度 ， 则 需要 将 文本 转换 为 路 径 。 

选中 文字 图 层 ， 执行 【文字 】| 【转换 为 形状 】 
命令 ， 可 将 文字 图 层 转换 为 形状 图 层 。 
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3.4.4 文字 绕 路 径 


文字 可 以 依照 开放 或 封闭 的 路 径 来 排列 , 从 而 














满足 不 同 的 排版 需求 。 
1. 文字 绕 排 路 径 
创建 文字 绕 路 径 排版 的 效果 


径 ， 然 后， 选择 【 横 排 文字 工具 】 
到 路 径 上 , 当 光 标 显示 为 站 时 ., 单 各 


， 首 先 要 创建 路 
[移动 鼠标 
fF 即 可 输入 文字 。 
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2. 创建 路 径 排 版 文字 





选择 【 横 排 文字 工具 】[ 工 J], 移动 到 路 径 内 部 ， 
当 显示 为 : 蕊 时 , 单 击 即 可 输入 文字 . 创建 封闭 的 路 


径 排 版 文字 。 
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3. 设置 绕 排 文字 4. 编辑 路 径 
创建 完成 绕 排 文 字 后 , 可 以 使 用 【段落 】 面 板 当 路 径 内 填充 文本 后 ， 选 择 【 直 接 选 择 工具 】 








对 封闭 路 径 内 的 绕 排 文字 进行 调整 对 于 创建 的 路 [LS。 选 中 某 个 控制 点 后 .进行 移动 或 者 改变 控制 











径 排 版 文本 受 文本 内 容 的 影响 . 文本 一 般 不 会 密切 ”点 上 的 控制 柄 . 使 路 径 边 缘 变形 . 从 而 改变 路 径 内 
地 与 路 径 结合 在 一 起 ,此 时 , 单 击 【 段 落 】 面 板 中 部 文字 的 显示 效果 。 





的 【全 部 对 齐 】 转 按钮 ， 强迫 文本 内 容 填 满 路 径 。 
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互联 网 中 的 网 幅 广 告 (Banner) 是 目前 最 常见 的 广告 方式 之 一 ， 
一 个 好 的 Banner 不 仅 可 以 吸引 更 多 的 访问 者 ,而且 还 可 以 增加 网 站 




















的 知名 度 。 在 本 练习 中 ,将 通过 制作 一 个 化 妆 品 网 幅 广告 来 详细 介 oa 
绍 Photoshop 中 的 图 层 样式 、 渐 变 工具 、 横 排 文字 工具 等 常用 工具 的 使 用 答 形 夺权 工具 
使 用 横 排 文字 工具 
水 润 娇 颜 使 用 渐变 工具 
水 澜 盈 润 使 用 文字 变形 工具 
操作 步骤 “>2 STEPI02 在 【工具 箱 】 面 板 中 单 击 【渐变 工 


STEP|01 执行 [文件 ] | [新 建 ] 命令 . 在 弹出 的 【新 。 具 】 按 钮 ， 单 击 【工具 选项 】 栏 中 的 【渐变 色 块 】 





建 】 对 话 框 中 设置 文档 参数 ， 并 单 击 【 确 定 】 按 钮 。 








名 称 (N): [aanner 
文档 类 型: 





























| 全 素 引 | [出 除 预 设 (D》 

[全 表 

[全 霜 英 寺 
[RGB 颜色 “<:] [8 位 旧 
: [BB 色 sj 









































:| 方形 像素 





























二 STEPI03 在 漳 出 的 【渐变 编辑 器 】 对 话 框 中 ， 在 
4596 位 置 外 增加 一 个 色 标 ,并 分 别 设置 三 个 色 标 的 





度 】 对 话 框 中 . 启用 【着 色 】 复 选 框 . 并 设置 相应 
的 参数 。 


















































名 种 (N): 
一 淹 要 类 融 [区 所 5] 一 一 一 一 一 一 一 一 一 一 
平滑 度 (M): |100| - | % 
: 
茵 BE 
百 7 1 
考 |fob2aa 这 fae7ee fob7cd 


| |-|]% ”位 十 :[ ”|]% | 出 除 (D) | 






















































































STEP|07 同时 选择 “图 层 1” 和 “图 层 2” 图 层 ， 
单 击 【 面 板 】 底 部 的 【链接 图 层 】 按 钮 链接 图 层 。 








位 置 0:145 ”]% [ 删除 (D) ] 











STEP|04 然后 ,在 图 层 中 从 左 向 右 拖 动 鼠标 ,给 




















STEP|08 单 击 【 工 具 箱 】 面 板 中 的 【 横 排 文 字 工 


具 】 按 钮 ， 在 图 像 左 侧 输入 文本 “M ， 并 在 【 字 
STEP|05 打开 所 有 素材 , 单 击 【移动 工具 ]】 按钮 。 符 】 面 板 中 设置 文本 的 字体 格式 。 








将 素材 分 别 拖 到 当前 图 层 中 ， 并 调整 其 具体 位 置 。 向 Ea 

































































STEP|09 单 击 【图 层 】 面板 中 的 【添加 图 层 样式 】 
STEP|06 选择 “图 层 1” 图 层 . 执行 【图 像 ] | 【 调 按钮 选择 【渐变 和 加 】 选 项 ， 在 弹出 的 对 话 框 中 
整 】| 【色相 /饱和 度 】 命 令 ， 在 弹出 的 【色相 /饱和 设置 渐变 翅 加 参数 ， 并 单 击 渐变 条 。 














:网页 (CC 2015 中 文 版 ) 从 新 手 到 高 手 






























































本 
混 人 模式 : [ 下 这 站 口 妨 
ee 
5 加 到 | DD 欣 ®) 
术 下 : [ 捉 的 引 回 5 图 慰 挤 四 
设计 [对 
Pr 
[可 加 VE ] | 亨 各 证 











STEP|10 然后 ， 在 弹出 的 【渐变 编辑 器 】 对 话 杠 
中 , 在 48 和 49 位 置 处 添加 色 标 . 并 分 别 设置 色 标 








网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 : 








STEP|12 单 击 【图 层 】 面 板 中 的 【添加 图 层 样式 】 
按钮 .选择 【外 发 光 】 选 项 . 在 弹出 的 对 话 框 中 设 
置 外 发 光 样 式 的 各 项 参数 。 





















































一 引发 光 -一 
一 绵 攀 一 一 一 一 一 
混 S 模 式 : [ 池 4] 
7 明度 (0 一 23 一 [75 |]% 
NN: C0 |% 
@ | JIO 有 
SEE 
方法 : | 条 和 _ 
RP GT |% 
大 NS [5 |] 全 



















































































































































































的 填充 颜色 。 
| EL :| 
确定 
取消 
载 入 ()… 
存储) ] 
名 称 (N): [ 自 定 [新 还 (w) ] 
渐变 类 型 : [ 实 底 。 
平滑 度 M): [100] - ] % 
三 fbfd3 
# [fibfcs ] 天 | 人 cd4 
不 透明度: | ”| - ] % 位 置 : | 骗 | 删除 (D， 
项 色 : 四 gmc: [9 ]% [mo) ] 
STEP|11 单 击 【 图 层 】 面 板 中 的 【添加 图 层 样式 】 
按钮 .选择 【内 发 光 】 选 项 . 在 弹出 的 对 话 框 中 设 
置 内 发 光 样 式 的 各 项 参数 。 
内 发 光 
结构 
涩 全 模式 : Tn 
不 透明 度 (0): 一 一 一 一 % 
和 NG ]x 
@ | 1O 1-] 
方法 : | 条 
源 : O 〇 居中 国 。 @® 过 荆 (G) 
阳 窜 (0: CG |o % 
(Sy: [7] 




















STEP|13 单 击 【 图 层 】 面 板 中 的 【添加 图 层 样式 】 






































按钮 .选择 【投影 】 选 项 ,在 弹出 的 对 话 框 中 设置 
投影 样式 的 各 项 参数 。 
投影 
结构 
混合 模式 : Ee 
To: 一 一 一 一 
ga 人、 ) 1205 ] 度 [ 回 使 用 全 局 光 (G) 
人 
扩展 RE |% 
大 Ne: 一 一 虽 ] 鲜 























STEP|14 单 击 【图 层 】 面 板 中 的 【添加 图 层 样式 】 
按钮 , 选择 【 描 边 】 选 项 ,在 弹出 的 对 话 框 中 设置 
描 边 样式 的 各 项 参数 。 








结构 
大 NS 一 





像素 














[100 |% 














复位 Xi 值 











第 3 章 网 页 图 像 处 理 


























STEP|15 使 用 相同 的 方法 . 在 图 像 中 输入 文本 美 ”STEP|16 在 图 像 右 侧 依次 输入 剩余 文本 .并 在 [ 字 








迪 凯 ”， 并 设置 其 描 边 、 外 发 光 、 投 影 和 渐变 释 加 。 符 】 面 板 中 分 别 设置 相应 的 字体 格式 。 
图 层 样式 。 四 







水 润 娇 颜 








ET A 水 澜 盈 润 











练习 : 制作 火焰 特效 文字 








网 页 中 的 文字 不 仅 是 网 站 信息 传达 的 主要 媒介 ， 也 是 网 页 中 必 
不 可 少 的 重要 视觉 艺术 传达 方式 ,在 设计 网 页 时 .合理 添加 艺术 文字 . 





新 建文 档 
不 仅 可 以 突出 文字 主体 、 强调 重点 ,更 能 体现 出 页 面 的 艺术 性 。 在 本 不 肌 过 本 
练习 中 ,将 通过 制作 火焰 特效 文字 ,来 详细 介绍 Photoshop 中 各 种 工 使 用 横 排 文字 工具 
具 、 滤 镜 和 图 层 样式 的 操作 方式 和 实用 技巧 。 设置 文本 格式 





设置 图 层 样式 
盖 印 图 层 
旋转 图 像 





操作 步骤 “》》》 STEP|02 单 击 【 横 排 文字 工具 】 按 钮 ， 输 入 字 
STEPI01 执行 【文件 】 | [新 建 】 命令， 在 弹出 的 母 。 调 整 其 位 置 ， 并 将 【字体 】 设 置 为 【宋体 ]. 
【新 建 】 对 话 框 中 设置 文档 参数 ， 单 击 【 确 定 】 【字号 】 设 置 为 【200 点 】 【消除 锯齿 】 设 置 为 
按钮 【锐利 ]。 

















网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 






















STEP|05 执行 【 滤 镜 】 | 【风格 化 】 | 【 风 ] 命 
令 . 保持 默认 设置 . 单 击 【确定 】 按 钮 。 














再 | 
[文字 
文档 类型 (: | 自 定 好 表 
大 小 四 存 鱼 预 设 (S). 
守 雇 (Wj: [1024 。 ”” ]| 久 素 王 队 祯 朗 ( 
高 雇 (Ej: [766 ”| 鲁 素 外 


分 汰 率 (R); |72 


颜色 模式 (4): | RGB8 颜色 





背景 内 容 (Cj: | 其 它 
高 
颜色 配置 六 件 (9)j: [ 工作 中 的 RG 
生 素 长 宽 比 29: [ 








8 
ee | 四” 文档 :225MI023K pl， 


STEPI03 新 建 “ 图 层 1” 
Shift+Ctrl+Alt+E 合并 可 见 图 层 


一 


图 层 . 
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STEP|04 执行 【 医 
针 90”】 命 令 ， 旋转 图 像 。 








图 
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欧 
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STEP|06 接着 ， 按 快捷 键 Chl+F， 重复 执 行 该 命 


令 三 次 , 增加 “ 风 ” 效 果 
NN 





昌 
日 
8 
0 
8 
区 


> 


【旋转 画布 】 | 
旋转 图 像 ， 将 图 像 恢复 过 来 。 


‘7% [四 又 档 :225W325M bl 


像 】| 





以 | 


【 顺 时 











STEP|07 执行 【 
针 90”]】 命 令 


0 [30 [2 [2 20 J 20 [2 [00 [0 enn, 























57% 区 
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STEP108 执行 【 滤 镜 】| 【模糊 】|【 高 斯 模糊 】 命 
令 . 在 弹出 的 【高 斯 模糊 】 对 话 框 中 设置 【半径 】 














选项 ， 并 单 击 【 确 定 】 按 钮 。 












苛 预览 P) 





半生 (R): [4.0 | 


[a 

















STEP109 执行 【图像 | 【调整 】 | 【色相 /饱和 
度 】 命 令 ， 在 弹出 的 【色相 /饱和 度 】 对 话 框 中 启 
用 【着 色 】 复 选 框 ， 并 设置 其 参数 。 





























色相 /饱和 度 
预 设 (E): [ 自 定 
图 
色相 (H): [4 | 
一 2 
饱和 度 (A): 
山 启用 
明度 (DD): Y 
必 7 光 本 加 预览 p) 

















STEP|10 按 快捷 键 Cul+J， 复制“ 图 层 1” 图 层 。 
然后 , 再 次 按 快捷 键 Ctrl+U, 在 弹出 的 对 话 框 中 设 
置 其 参数 。 






































色相 /饱和 度 L xj 
预 设 (E): [ 自 定 :| 汪 . 
取消 
[全 图 ] 
色相 (H): 
明度 (D): [o 
口 看 色 (Oo) 
be 2 Pp) 
OC— 











第 3 章 网 页 图 像 处 理 








STEP|11 将 “图 层 1 拷贝 ”图 层 的 【混合 模式 】 
设置 为 【 滤 色 】〗， 使 橘 黄色 和 红色 能 很 融洽 地 结合 
到 一 起 。 



































STEP|12 合并 “图 层 1 拷贝 ”和 “图 层 1” 为 新 
的 “图 层 1” 图 层 . 执行 【 滤 镜 】 | 【液化 】 命 令 . 
设置 其 画笔 参数 。 


[ 


























确定 
取消 
载 入 上 次 网 格 (0) 
口 高 和 模式 
男 生 工具 选项 
大 小 
夺 力 
光 笔力 设置 
重建 选项 
恢复 全 部 (A) 





STEP|13 在 对 话 框 左 侧 的 图 像 中 描绘 出 主要 的 火 
焰 ， 然后 将 画笔 和 压力 调 小 ,绘制 出 其 他 细小 的 
火焰 。 




















015 中 











STEP|14 单 击 【 工 具 箱 】 面 板 中 的 【涂抹 工具 】 
按钮 . 在 火焰 上 轻 轻 涂抹 . 不 断 改变 笔头 的 大 小 和 
压力 ， 以 适应 不 同 的 需求 。 











档 :2.25MA3.25ML 








STEP|15 按 快捷 键 Ctl+J 复制 “图 层 1” 图 层 ， 
然后 将 文本 图 层 放置 为 最 上 层 ， ai 
黑色 ,调整 其 位 置 让 火炮 稍微 向 下 移动 一 点 。 











eee/% [四 光 析 225M/S2M Pl! 








STEP|16 按 快捷 键 Cul+J 复制 “图 层 1 拷贝 ”， 
并 将 其 放置 为 最 上 层 , 同时 将 【混合 模式 】 设 置 为 
【 滤 色 】。 




















四 





STEP| 人 7 单 击 【 图 层 】 面 板 中 的 【添加 图 层 蒙 版 
按钮 ， 为 该 图 层 添加 一 个 蒙 版 。 























;网 页 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 
































STEP|18 将 前 景色 设置 为 白色 、 背 景色 设置 为 黑 
色 , 单 击 【 渐 变 工 具 】 按 钮 . 在 蒙 版 中 建立 前 景色 
到 背景 色 渐变 的 渐变 色 。 

















文档 225M105MN 

















STEPI19 新 建 “ 图 层 2” 图 层 ， 按 快捷 键 
Shift+Ctrl+Alt+E 盖 印 可 见 图 层 。 然 后 ,执行 【 滤 
镜 】 | 【模糊 】 | 【高 斯 模糊 】 命 令 , 设置 其 【 半 
径 】 的 数值 。 


















































第 3 章 网 页 图 像 处 理 














STEP|20 然后 ,将 该 图 层 的 【图 层 混合 模式 】 设 ”STEP|22 至 此 . 火焰 特效 字 制 作 完成 ， 其 最 终 效 
置 为 【 滤 色 】， 并 将 【不 透明 度 】 设 置 为 50%。 果 图 如 下 所 示 。 

































Seer’ [ee 档 225RIZEN 站， 
STEP|21 再 次 盖 印 可 见 图 层 . 更 改 图 层 的 【混合 
模式 】 以 及 【不 透明 度 】， 增 强 图 像 的 发 光 效果 。 


[2 [3 | en EN NN 























=” 团 上 
= 图 :i 
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新 手 训 练 营 











练习 1: 制作 茶叶 网 Banner 
今 downloads\3\ 新 手 训 练 营 \ 茶 叶 网 Banner 
提示 : 本 练习 中 ,首先 新 建文 档 , 运用 【渐变 码 
加 】 图 层 样式 设置 背景 填充 颜色 。 同 时 ,运用 【钢笔 
工具 】、 【椭圆 工 具 】、【 直 接 选 择 工具 】 和 【转换 点 工 
具 】 绘 制 并 调整 背景 图 案 路 径 ， 并 使 用 图 层 样式 设置 
路 径 图 案 的 最 终 效果 。 然 后 , 添加 “茶叶 地 ”素材 . 
并 使 用 【椭圆 选 框 工具 】 选 取 素材 区 域 . 同 时 为 该 图 
层 添 加 蒙 版 , 并 变换 、 缩 放 和 调整 蒙 版 形状 的 大 小 和 
颜色 。 删 除 并 取消 选区 之 后 为“ 外壳 ”图 层 添加 “| 练习 2 制作 春季 变 冬季 


























































































































图 形 样式 。 最 后 .添加 所 有 的 图 像素 材 ， 为 其 设置 售 downloads\3\ 新 手 训练 营 \ 春 季 变 冬季 
蒙 版 效果 。 使 用 【 横 排 文 字 工 具 】 输 入 文本 ， 并 设 提示 : 本 练习 中 ,首先 打开 素材 图 像 ， 创 建新 的 
置 文本 的 字体 格式 。 同 时 ,新建 图 层 , 绘制 贺 角 和 矩形 ”填充 或 调整 图 层 并 设置 通道 颜色 ， 使 其 变 成 冬天 色 。 





















































形状 . 设置 形状 颜色 .添加 素材 图 像 并 制作 相应 字体 。” 同时. 运用 【艺术 效果 】 滤 镜 , 增加 图 像 的 颗粒 效果 . 
即 可 。 并 运用 图 层 样 式 和 【多 边 形 套 索 工具 】 为 图 像 添 加 门 











网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 








窗 颜 色 。 然 后 .复制 “背景 图 层 ”， 运用 【像素 化 】 
滤 镜 , 设置 图 像 的 点 状 化 效果 . 同时 调整 图 像 的 阅 值 . 
形成 降雪 效果 。 最 后 ,运用 【模糊 】 滤 镜 . 增加 降雪 
的 模糊 效果 , 并 通过 调整 色 阶 和 隐藏 图 层 来 得 到 最 终 
效果 。 


























练习 3: 风景 合成 
全 downloads\3\ 新 手 训 练 营 \ 风 景 合成 
提示 : 本 练习 中 , 首先 打开 素材 图 像 . 将 “晚霞 ” 
素材 添加 到 “松树 ”窗口 中 , 更改“ 图 层 1” 图 层 的 
大 小 ， 并 将 【混合 模式 】 设 置 为 【又 加 】。 使 用 【 仿 
制图 章 工具 】 擦 除 左下 角 的 “铁塔 ”图 形 . 同样 右 下 
角 复制 红色 区 域 .使 其 能 够 遮盖 住 “ 背 景 ” 图 层 上 的 
山 查 部 分 。 然 后 隐藏“ 图 层 1” 图 层 . 复制 【 蓝 】 
通道 ， 并 调整 其 色 阶 参数 。 恢 复 RGB 通道 图 层 ， 并 
复制 “图 层 1” 图 层 。 同 时 ， 单 击 【 通 道 】 面 板 内 的 
“ 蓝 副本 "通道 , 并 为 “图 层 1 副本 ” 添加 图 层 蒙 版 。 
最 后 ， 选择 “图 层 1” 图 层 使 用 【橡皮 擦 工具 】 擦 除 
相应 区 域 。 






























































;网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 : 





练习 4: 制作 静态 全 屏 广告 
全 downloads\3\ 新 手 训练 营 \ 静 态 全 屏 广告 
提示 : 本 练习 中 . 首先 新 建文 档 ， 导 入 素材 并 调 
整 素材 的 色彩 平衡 。 新 建 云彩 羽化 图 层 . 制作 羽化 云 
彩 效果 。 同时 . 相继 导入 相应 的 素材 . 为 其 添加 蒙 版 . 
设置 线性 渐变 色 并 用 【画笔 工具 】 涂 抹 蒙 版 ， 以 制作 
蓝 色 天 空 、 大海 和 白云 效果 。 然后, 导入 地 球 仪 素材 ， 
修改 调整 素材 并 导入 地 球 仪 上 部 素材 图 像 . 删除 多 余 
的 素材 部 位 . 设置 其 羽化 效果 并 翻转 图 像 。 最 后 , 添 
加 房屋 图 像 . 并 抠 取 房屋 效果 ,输入 横 排 文字 并 设置 
文本 的 字体 格式 。 同时， 新建 图 层 , 绘制 路 径 形状 并 
为 形状 设置 图 层 样式 。 
































练习 5: 制作 糖果 字 
全 downloads\3\ 新 手 训练 营 \ 糖 果 字 
提示 : 本 练习 中 ,首先 新 建文 档 ， 输 入 横 排 文 字 
并 排列 文字 。 复制 “ 蓝 ” 通道 并 反 相 该 通道 。 新 建 “ 糖 
果 ” 图 层 ， 制作 图 层 背景 色 ， 载 入 通道 素材 ， 并 设置 
通道 素材 的 羽化 效果 和 填充 效果 。 然后, 新 建 “ 高 光 ” 
图 层 ， 载 入 通道 素材 ， 设 置 填充 颜色 ， 使 用 【 滤 镜 】 











效果 设置 其 整体 效果 。 同 时 , 载 入 “ 红 ” 通 道 , 并 依 
次 设置 相应 的 效果 。 最 后 ,依次 载 入 相应 通道 , 设置 
相应 效果 并 调整 最 终 效果 。 











练习 6: 制作 设计 工作 室 Banner 
今 downloads\3\ 新 手 训 练 营 \ 设 计 工 作 室 Banner 
提示 : 本 练习 中 ,首先 新 建文 档 . 设置 背景 图 层 
的 背景 效果 , 新 建 图 层 . 并 设置 图 层 的 渐变 填充 效果 。 
新 建 墨迹 图 层 . 添加 墨迹 素材 ， 并 设置 素材 的 显示 效 
果 。 依 次 复制 墨迹 图 层 ， 并 分 别 设置 其 填充 和 效果 。 


















































第 3 章 网 页 图 像 处 理 


然后 ,添加 水 墨 画素 材 ， 调整 素材 颜色 和 方向 ,复制 
素材 图 层 并 调整 其 位 置 。 添 加 植物 素材 . 复制 素材 图 
层 并 调整 素材 位 置 。 用 同样 的 方法 ,依次 添加 七 星 靳 
虫 、 绿 叶 和 蝴蝶 素材 。 输 入 横 排 文 本 ， 并 设置 文本 的 
字体 格式 和 图 层 样式 。 最 后 使 用 绘制 工具 制作 导航 
形状 .并 为 其 添加 渐变 春 加 样式 。 在 导航 形状 上 输入 
文本 并 设置 文本 的 字体 格式 。 
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练习 7: 制作 射线 文字 
人 downloads\3\ 新 手 训练 营 \ 射 线 文字 
提示 : 本 练习 中 , 首先 新 建文 档 ， 并 将 背景 图 层 
颜色 设置 为 黑色 。 使 用 【 横 排 文 字 工 具 】 输 入 横 排 文 
字 ， 载 入 文字 选区 ， 新建“ 图 层 1 ”图 层 . 添加 【 杂 
色 】 和 【模糊 】 波 蚀 ， 并 重复 添加 滤 镜 。 然 后 ， 复 制 
“图 层 1” 为 “图 层 1 副本 ”图 层 ， 为 其 添加 【 锐 化 】 
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和 【 径 向 模糊 】 滤 镜 。 接 着 设置 该 图 层 的 【混合 模式 】 
选项 ， 并 调整 图 层 位 置 。 使 用 【变换 选区 】 命 令 缩小 
图 像 ， 并 羽化 图 层 。 最 后 , 新建“ 图 层 2” 图 层 , 在 
羽化 后 的 选区 中 连续 三 次 填充 白色 。 并 使 用 【高 斯 模 
糊 】 滤 镜 增 加 模糊 效果 ， 同 时 创建 新 的 填充 或 调整 图 
层 , 设置 图 层 的 色相 和 饱和 度 , 并 为 图 层 添加 外 发 光 、 
斜面 和 浮雕 、 内 阴影 等 图 层 样式 。 

































































练习 8: 制作 珠宝 文字 
信 downloads\3\ 新 手 训练 营 \ 珠 宝 文字 
提示 : 本 练习 中 ,首先 新 建文 档 ,设置 背景 图 像 
的 纹理 化 效果 。 输入 横 排 文本 , 设置 文本 的 字体 格式 
将 文本 转换 为 形状 并 调整 文字 路 径 . 并 使 用 绘制 工具 
和 【 滤 镜 】 功 能 .设置 文字 的 路 径 效果 。 然 后 .为 文 
ea 的 图 像样 式 . 使 用 【画笔 工具 ]】 涂抹 文字 。 
最 后 , 设置 文字 的 模糊 效果 ， 以 及 色相 和 饱和 度 ,并 
使 用 【多 边 形 工具 】 绘 制 大 小 不 一 的 四 角 星 。 









































网 页 作为 一 种 新 的 视觉 表现 形式 . 它 兼容 了 传统 平面 设计 的 特征 , 又 具备 其 所 没有 的 优势 ,是 将 技 
术 性 与 艺术 性 融 为 一 体 的 创造 性 活动 。 而 网 页 界面 设计 所 涉及 的 范围 非常 广泛 ， 在 Photoshop 中 主要 涉 
及 到 对 网 页 界面 图 像 进行 各 种 特效 设计 的 蒙 版 、 3D 效果 、 滤 镜 和 切片 等 技术 。 本 章 将 详细 介绍 网 页 界 
面 设计 所 应 用 的 各 种 Photoshop 技术 ， 以 协助 用 户 制作 出 醒目 的 网 页 界面 。 





第 4 章 网 页 界面 设计 





有 本 应 用 莹 版 





在 Photoshop 中 ., 蒙 版 可 以 控制 图 像 的 局 部 显 
示 和 隐藏 . 是 合成 网 页 图 像 的 重要 途径 ,。 Photoshop 
的 蒙 版 包括 快速 蒙 版 、 剪 贴 蒙 版 、 图 层 蒙 版 和 形状 
蒙 版 等 。 


4.1.1 








快速 蒙 版 

快速 蒙 版 模式 是 使 用 各 种 绘图 工具 来 建立 临 
时 蒙 版 的 一 种 高 效率 方法 ， 可 以 快速 地 转换 选择 
区 域 
1. 创建 快速 蒙 版 

单 击 工具 箱 中 的 【以 快速 莹 版 模式 编辑 ] 按钮 
加 .进入 快速 蒙 版 编辑 模式 。 使 用 相应 的 工具 在 

















画布 中 单 击 并 拖 动 ， 绘 制 半 透明 红色 图 像 。 
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单 击 工具 箱 中 的 【以 标准 模式 编辑 】 按 钮 国 . 
返回 正常 模式 , 半 透明 红色 图 像 转换 为 选区 。 进 行 
任意 颜色 填充 后 ,发 现 原 半 透 明 红 色 图 像 区 域 被 

















2. 设置 快速 蒙 版 
默认 情况 下 . 在 快速 模版 模式 中 绘制 的 任何 图 

像 . 均 呈现 红色 半 透 明 状态 . 并 且 代表 被 蒙 版 区 域 。 
当 快 速 蒙 版 模式 中 的 图 像 与 背景 图 像 有 所 冲突 时 ， 
可 以 通过 更 改 【快速 蒙 版 选项 】 对 话 框 中 的 颜色 值 
与 不 透明 度 值 . 来 改变 快速 蒙 版 模式 中 的 图 像 显示 
效果 。 

双击 工具 箱 中 的 【以 快速 蒙 版 模式 编辑 】 按 钮 
或 者 【以 标准 模式 编辑 】 按钮 加 , 在 弹出 的 【 快 
速 蒙 版 选项 】 对 话 框 中 ,设置 【 不 透明 度 】 选 项 ， 
单 击 【确定 】 按 钮 即 可 。 
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色彩 指示 : 
@® 被 蒙 版 区 域 (W) 
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[中 设 到] [二 








由 于 快速 蒙 版 模式 中 的 图 像 与 标准 模式 中 
的 选区 为 相反 区 域 ， 要 想 使 之 相同 ， 需 要 局 
用 【快速 蒙 版 选项 】 对 话 框 中 的 【所 选区 域 】 
选项 。 


4.1.2 ”剪贴 莹 版 


剪贴 蒙 版 主要 是 使 用 下 方 图 层 中 图 像 的 形状 ， 
来 控制 其 上 方 图 层 图 像 的 显示 区 域 。 剪贴 蒙 版 中 下 
方 图 层 需要 的 是 边缘 轮廓 ， 而 不 是 图 像 内容 。 
1. 创建 剪贴 蒙 版 

当 【 图 层 】 面 板 中 存在 两 个 或 者 两 个 以 上 图 层 
时 ， 即 可 创建 剪贴 蒙 版 。 选 择 上 方 图 层 . 执行 【图 
层 】|【 创 建 剪贴 蒙 版 】 命令， 即 可 创建 剪贴 蒙 版。 























网 由 和 (CC 2015 中 文 版 ) 从 新 手 到 高 手 
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网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 : 





3. 设置 图 层 属性 
在 剪贴 蒙 版 中 ,可 以 设置 图 层 【 不 透明 度 】 选 
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9 所 加 中. 外 加 言 间 o9 友 . 回 中 .四 司 瘟 引 








































用 户 也 可 以 按 住 Alt 键 ， 在 选择 图 层 与 相 邻 
图 层 之 间 单 击 ， 也 可 创建 剪贴 莹 版 。 





创建 剪贴 蒙 版 后 , 用 户 会 发 现下 方 图 层 名 称 带 
有 一 个 下 划 线 ,而 上 方 图 层 的 缩 览 图 则 为 缩 进 状 


态 , 同时 显示 一 个 剪贴 蒙 版 图 标 国 . 
的 显示 也 会 随 之 变化 。 


而 画布 中 图 像 


上 





2. 移动 图 层 

在 剪贴 蒙 版 中 ,两 个 图 层 中 的 图 像 均 可 以 随意 
移动 。 例如 ,移动 下 方 图 层 中 的 图 像 . 会 在 不 同位 
置 , 显示 上 方 图 层 中 的 不 同 区 域 的 图 像 : 如 果 移动 
的 是 上 方 图 层 中 的 图 像 . 那么 会 在 同一 位 置 . 显示 
该 图 层 中 不 同 区 域 图 像 。 
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项 . 或 者 设置 图 层 【 混 合 模式 】 选 项 . 来 改变 图 像 
效果 。 通 过 设置 不 同 的 图 层 . 来 显示 不 同 的 图 像 
效果 。 

当 设 置 上 方 图 层 的 【混合 模式 】 选 项 . 可 以 使 
该 图 层 图 像 与 下 方 图 层 图 像 融 合 为 一 体 ; 如 果 设 置 
下 方 图 层 的 【混合 模式 】 选 项 . 必须 在 剪贴 蒙 版 下 
方 放置 图 像 图 层 ， 这 样 才能 够 显示 混合 模式 效果 。 



































设置 上 方 图 层 为 竹 加 模式 设置 下 方 图 层 为 竹 加 模式 


而 同时 设置 剪贴 蒙 版 中 两 个 图 层 的 【混合 模 
式 】 选 项 时 , 会 得 到 两 个 全 加 效果 。 而 当 剪 贴 蒙 版 
中 的 两 个 图 层 均 设置 【混合 模式 】 选 项 , 并且 隐藏 
剪贴 蒙 版 组 下 方 图 层 后 .效果 与 单独 设置 上 方 图 层 
效果 相同 。 

当 设置 剪贴 蒙 版 中 下 方 图 层 的 【不 透明 度 】 选 
项 . 可 以 控制 整个 剪贴 蒙 版 组 的 不 透明 度 ; 而 调整 
上 方 图 层 的 【不 透明 度 】 选 项 ,只 是 控制 其 自身 的 
不 透明 度 ， 不 会 对 整个 剪贴 蒙 版 产生 影响 。 










































































图 层 蒙 版 之 所 以 可 以 精确 . 细腻 地 控制 图 像 显 

















示 与 隐藏 的 区 域 , 因为 图 层 蒙 版 由 图 像 的 灰 度 来 决 
定 图 层 的 不 透明 度 。 
1. 创建 图 层 蒙 版 

单 击 【 图 层 】 面 板 底部 的 【添加 图 层 蒙 版 】 按 
钢 加 |, 或 者 单 击 【 蒙 版 】 面 板 右上 角 的 【添加 像 
素 莹 版】 按钮 国 ， 即 可 为 当前 普通 图 层 添加 图 层 












































蒙 版 。 
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史 和 四 加. 巴 吾 言 = 





如 果 画 布 中 存在 选区 , 直接 单 击 【 添 加 图 层 蒙 
版 】 按 钮 | 加 |。 在 图 层 蒙 版 中 .选区 内 部 呈 白色 
选区 外 部 呈 黑 色 ， 表 示 黑 色 区 域 被 隐藏 。 













[Ex +] Pm: [oo%|-] 
坟 E: 四 中 B65: [i00%]-] 


的 庆 . 加 0. 向 加 证 


2. 停 用 与 启用 图 层 蒙 版 

通过 图 层 蒙 版 编辑 图 像 ， 只 是 隐藏 图 像 的 局 
部 . 并 不 是 删除 。 所 以 ,随时 可 以 还 原 图 像 原来 的 
效果 。 例 如 右 击 图 层 蒙 版 缩 览 图 , 选择 【 停 用 图 层 
蒙 版 】 命令 ， 即 可 显示 原 图 像 效 果 。 
3. 浓度 与 羽化 

当 图 层 蒙 版 中 存在 灰色 图 像 , 在 【 蒙 版 ] 面板 
中 向 左 拖 动 【 浓 度 】 滑 块 。 蒙 版 中 黑色 图 像 逐渐 转 
换 为 白色 ， 而 彩色 图 像 被 隐藏 的 区 域 逐 渐 显示 。 



























































【浓度 】 为 30% 





| 【浓度 】 为 70% 





在 【 蒙 版 】 面 板 中 ， 向 右 拖 动 【羽化 】 滑 块 。 
灰色 图 像 边 缘 被 羽化 , 而 彩色 图 像 由 外 部 向 内 部 逐 
渐 透 明 。 








| 【羽化 ] 为 4 | 


【羽化 】 为 100% 





4.1.4 ”矢量 蒙 版 


矢量 蒙 版 是 与 分 辨 率 无 关 的 蒙 版 , 是 通过 钢笔 
工具 或 者 形状 工具 创建 路 径 . 然后 以 矢量 形状 控制 
图 像 可 见 的 区 域 。 
1. 创建 空白 矢量 蒙 版 

矢量 蒙 版 包括 多 种 创建 方法 . 不同 的 创建 方法 
会 得 到 相同 或 者 不 同 的 图 像 效果 。 

选择 普通 图 层 . 单 击 【 蒙 版 ] 面板 右上 方 的 【 添 
加 矢量 蒙 版 ] 按钮 , 在 当前 图 层 中 添加 显示 全 部 的 
矢量 蒙 版 : 如 果 按 住 Alt 键 单 击 该 按钮 ， 即 可 添加 











然后 选择 某 个 路 径 工具 , 在 工具 选项 栏 中 启用 
【路 径 】 功 能 。 在 画布 中 建立 路 径 ， 图 像 即 可 显示 
路 径 区 域 。 








2. 以 现 有 路 径 创 建 空白 矢量 蒙 版 
选择 路 径 工具 ， 在 画布 中 建立 任意 形状 的 路 

径 。 然 后 单 击 【 蒙 版 】 面 板 中 的 【添加 矢量 蒙 版 】 

按钮 图， 即 可 创建 带 有 路 径 的 矢量 莹 版 。 




















3. 创建 具有 矢量 蒙 版 的 形状 图 层 

选择 某 个 路 径 工具 后 ， 启 用 工具 选项 栏 中 的 
【形状 图 层 】 功 能 。 在 画布 中 单 击 并 且 拖 动 鼠 标 . 
即 可 在 【图 层 】 面 板 中 自动 新 建 具 有 矢量 蒙 版 的 形 
状 图 层 。 

















4. 编辑 蒙 版 路 径 

默认 情况 下 ,无论 创建 的 空白 矢量 蒙 版 是 显示 
全 部 状态 , 还 是 隐藏 全 部 状态 。 当 创建 形状 路 径 后 ， 
均 是 以 形状 内 部 为 显示 、 形 状 外 部 为 隐藏 。 

若 想 显示 路 径 以 外 的 区 域 . 则 可 以 在 使 用 【路 
径 选 择 工具 】 国 引 选 中 该 路 径 后 ， 在 工具 选项 栏 中 
启用 【从 形状 区 域 减 去 】 功能 贺 . 




















若 想 在 现 有 的 矢量 蒙 版 中 扩大 显示 区 域 , 则 需 
要 使 用 【直接 选择 工具 】 国 ]. 选中 其 中 的 某 个 节 
点 删除 即 可 。 











若 想 在 现 有 路 径 的 基础 上 添加 其 他 形状 路 径 . 
来 扩充 显示 区 域 ， 则 需要 选择 任意 一 个 路 径 工具 . 


1 有 > 大 应 用 滤 镜 
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启用 工具 选项 栏 中 的 【添加 到 路 径 区 域 】 功 能 . 在 
画布 空白 区 域 建立 路 径 即 可 。 
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滤 镜 命令 可 以 自动 地 对 一 幅 图 像 添 加 效果 . 滤 
镜 命 令 大 致 上 分 为 三 类 : 校正 性 滤 镜 、 破坏 性 滤 镜 
与 效果 性 滤 镜 。 虽然 滤 镜 效果 各 不 相同 , 但 是 使 用 
方法 与 操作 技巧 基本 相似 。 


4.2.1 校正 性 滤 镜 


校正 性 滤 镜 是 用 于 修正 扫描 所 得 的 图 像 , 以 及 
为 打印 输出 图 像 的 日 常 工 具 。 除了 传统 的 滤 镜 效果 
外 ，Photoshop 滤 镜 还 包括 专门 针对 摄影 照片 修饰 
的 模糊 滤 镜 以 及 相机 防 拌 功 能 的 【 防 抖 】 滤 镜 。 
1. 传统 滤 镜 

在 传统 滤 镜 中 ， 多 数 情况 下 它 的 效果 非常 细 
微 ,例如 模糊 滤 镜 组 . 锐 化 滤 镜 组 以 及 杂 色 渡 镜 组 。 











Pe Vs 





动感 模糊 


fo 


USM 锐 化 


高 斯 模糊 


[有 


锐 化 边缘 




















2. 模糊 画廊 

模糊 画廊 为 图 片 添加 场景 模糊 、 光圈 模糊 或 倾 
斜 偏 移 效果 。 执 行 【 滤 镜 】|【 模 糊 画 廊 】|【 场 景 
模糊 】 命 令 ， 在 弹出 的 【模糊 工具 】 面 板 中 ,设置 
模糊 参数 。 


























在 画布 中 拖 动 模糊 句柄 以 增加 或 减少 模糊 ， 
或 者 直接 在 【模糊 工具 】 面 板 中 设置 【模糊 】 参 
数值 。 

另外 .在 图 片 其 他 区 域 单 击 ， 即 可 添加 场景 
模糊 图 钉 ， 这 时 可 以 以 该 图 钉 为 中 心 设置 模糊 
程度 。 





04 








者 网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 








作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 














大 光圈 镜头 所 造成 的 散 景 . 因为 容易 凸显 出 主 
题 . 因此 在 拍摄 人 像 时 常 被 拿 来 运用 . 但 大 光圈 镜 
头 的 价格 较 贵 .变焦 镜头 恒定 大 光圈 的 镜头 更 
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El 
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松 制作 


户 可 通过 Photoshop 中 的 模糊 画廊 功能 , 轻 
大 光圈 散 景 效 果 。 执 行 【 滤 镜 】|【 模 糊 画 
廊 】|【 光 圈 模 糊 】 命 令 . 在 弹出 的 面板 中 设置 【 模 
糊 】 参 数值 即 可 。 









































使 
图 像 。 此 特殊 的 模糊 效果 会 定义 锐 化 区 域 . 
然后 在 边缘 处 逐渐 变 得 模糊 。【 移 轴 模 糊 】 效 果 可 
以 微型 对 象 的 照片 。 执 行 【 滤 镜 】|【 模 糊 】 
在 图 片上 方 显 示 移 轴 模糊 


拍摄 的 











用 于 模 








|【 移 轴 模糊 】 命 令 





钉 即 可 











【 移 轴 模 糊 】 效 果 模 拟 使 






































倾斜 偏 移 镜头 




















3. 相 
滤 


机 防 拌 功能 
镜 效果 中 的 【 防 抖 】 命令 能 够 挽救 因为 相机 

















抖动 而 失败 的 照片 。 无论 模糊 是 由 于 慢 速 快门 还 是 
长 焦距 造成 的 , 相机 防 拌 功 能 都 能 通过 分 析 曲 线 来 
恢复 其 清晰 度 。 

执行 【 滤 镜 】|【 锐 化 】|【 防 抖 】 命 令 ， 在 弹 
出 的 【 防 拌 】 对 话 框 中 设置 各 项 选项 . 单 击 【 确 定 】 
按钮 即 可 。 


te 
-py 
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Photoshop 还 提供 了 效果 滤 镜 该 滤 镜 是 破坏 
性 滤 镜 的 其 中 一 种 表现 。 效 果 性 滤 镜 包括 素描 滤 镜 
组 、 纹理 滤 镜 组 与 艺术 效果 滤 镜 组 等 。 这 些 滤 镜 命 
令 可 以 制作 出 想 要 的 图 像 效 果 。 

















4.2.2 ”破坏 和 效果 性 滤 镜 


破坏 性 滤 镜 能 产生 很 多 意 想不到 的 效果 , 而 这 
些 是 普通 Photoshop 工具 与 校正 性 滤 镜 很 难 做 到 
的 。 但 是 如 果 使 用 不 当 就 会 完全 改变 图 像 , 使 滤 镜 
效果 变 得 比 图 像 本 身 更 加 显眼 , 由 于 破坏 性 滤 镜 让 
普通 效果 经 过 简单 的 变化 转换 为 一 种 特殊 效果 .所 
以 Photoshop 中 提供 的 该 滤 镜 数量 几乎 是 校正 性 滤 
镜 的 两 倍 ， 例 如 扭曲 滤 镜 组 、 风 格 化 滤 镜 组 等 。 
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4.2.3 Adobe Camera Raw 
滤 镜 


对 于 数字 摄影 师 们 来 说 , 处 理 RAW 文件 实在 
是 一 个 令 人 头疼 棘手 的 问题 , 因为 这 种 文件 通常 处 
理 起 来 要 耗费 很 长 的 时 间 , 而 且 不 同 数码 相机 所 生 
成 的 RAW 文件 也 千差万别 。 不 过 现在 ，Adobe 公 
司 的 Photoshop CC 2015 添加 了 Camera Raw 滤 镜 ， 
可 以 在 Photoshop 界面 内 打开 并 编辑 这 些 RAW 
文件 。 

执行 【 滤 镜 】|【Camera Raw 滤 镜 】 命 令 , 在 
弹出 的 Camera Raw 对 话 框 中 设置 各 选项 参数 . 单 
击 【 确 定 】 按 钮 即 可 。 

在 该 对 话 框 中 ,不仅 包 括 不 同 的 查看 工具 与 调 
整 工具 , 还 包括 不 同 的 调整 选项 卡 , 从 而 调整 照片 
图 片 的 各 种 效果 。 其 中 , 不 同 工 具 与 调整 选项 卡 名 
称 以 及 相关 作用 .如 下 表 所 述 。 
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Camera Raw (1jpg) 















































字 母 名 称 作 用 



















单 击 预览 图 像 时 ， 将 预览 缩放 设置 为 下 一 较 高 预 设 值 。 按 住 Alt 键 并 单 击 可 
i 缩放 工具 使 用 下 一 较 低 缩放 值 。 在 预览 图 像 中 拖 移 缩放 工具 可 以 放大 所 选区 域 。 要 恢 
将 预览 图 像 的 缩放 级 别 设置 为 大 于 100% 时 ， 用 于 在 预览 窗口 中 移动 图 像 。 
在 使 用 其 他 工具 的 同时 , 按 住 空格 键 可 暂时 激活 抓 手工 具 , 单 击 两 次 抓 手 工 


复 到 100%， 单 击 两 次 缩放 工具 
B 手 抓 工 具 
具 可 将 预览 图 像 调整 为 适合 窗口 大 小 


使 用 该 工具 单 击 预览 图 像 的 不 同 区 域 ， 可 以 调整 图 像 的 颜色 平衡 效果 









Le 


颜色 取样 器 工具 | 使 用 该 工具 单 击 预览 图 像 的 不 同 区 域 ， 能 够 记录 相应 区 域 的 颜色 值 
目标 调整 工具 该 工具 包括 【参数 曲线 下 【色相 】 【饱和 度 〗【 明 亮度 】〗】 与 【 灰 度 混合 】 子 
选项 ， 选 择 不 同 的 子 选项 在 预览 图 像 中 单 击 并 拖 动 ， 可 以 调整 相应 的 效果 


使 用 该 工具 单 击 预览 图 像 的 某 个 区 域 , 能 够 去 除 该 区 域 中 的 图 像 ， 并 被 目标 





> 上 
污点 去 除 工具 区 域 覆 盖 融 合 
G 使 用 该 工具 能 够 去 除 图 像 中 眼睛 中 的 红色 像素 
H 调整 画笔 使 用 该 工具 单 击 并 拖 动 预览 图 像 ， 可 以 调整 局 部 区 域 中 的 各 个 调整 选项 





使 用 该 工具 单 击 并 拖 动 预览 图 像 , 能 够 将 相同 类 型 的 调整 渐变 地 应 用 于 某 个 
区 域 的 照片 ， 同 时 可 以 随意 调整 区 域 的 宽 罕 
使 用 该 工具 单 击 并 拖 动 预览 图 像 , 能 够 突出 展示 想 要 引起 观众 注意 的 图 像 的 
特定 部 分 
选择 对 话 框 中 右 侧 的 不 同调 整 选项 卡 ， 打 开 相应 的 调整 选项 ， 从 而 设置 相关 
的 选项 

在 预览 图 像 中 的 指针 下 面 显示 像素 的 红色 、 绿 色 和 蓝 色 值 

从 菜单 中 选择 一 个 放大 设置 ， 或 单 击 【 选 择 缩放 级 别 〗】 按 钮 
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在 Photoshop 中 不 仅 可 以 编辑 二 维 平面 画像 . 


而 且 还 可 以 应 用 3D 效果 , 通过 创建 三 维 对 象 来 制 
作 立 体 效 果 。 而 Photoshop CC 优化 了 3D 功能 . 从 
而 在 编辑 3D 对 象 时 更 加 稳定 、 快 速 。 


4.3.1 


创建 3D 对 象 


了 Photoshop CC 不 仅 支持 各 种 3D 文件 . 而 且 还 


能 够 在 该 软件 中 创建 3D 对 象 。 无 论 是 外 部 的 3D 
文件 , 还 是 自身 创建 的 3D 对 象 , 均 可 包含 下 列 一 
个 或 多 个 组 件 。 





口 网 格 提供 3D 模型 的 底层 结构 。 通 常 ， 


网 格 看 起 来 是 由 成 千 上 万 个 单独 的 多 边 
形 框架 结构 组 成 的 线 框 。3D 模型 通常 至 
少 包含 一 个 网 格 ， 也 可 能 包含 多 个 网 格 。 
在 Photoshop 中 ， 可 以 在 多 种 泻 染 模式 下 
查看 网 格 ， 还 可 以 分 别 对 每 个 网 格 进行 
操作 。 

材料 ”一 个 网 格 可 具有 一 种 或 多 种 相关 
的 材料 ， 这 些 材料 控制 整个 网 格 的 外 观 或 
局 部 网 格 的 外 观 。 这 些 材料 依次 构建 于 被 
称 为 纹理 映射 的 子 组 件 ， 它 们 的 积累 效果 
可 创建 材料 的 外 观 。Photoshop 材料 最 多 
可 使 用 9 种 不 同 的 纹理 映射 来 定义 其 整体 
外 观 。 

光源 ”光源 类 型 包括 无 限 光 、 点 光 和 聚 光 
灯 。 可 以 移动 和 调整 现 有 光照 的 颜色 和 
强度 ， 并 且 可 以 将 新 光照 添加 到 3D 场 
景 中 。 


执行 【窗口 】|3D 命令 ， 弹出 3D 面板 。 在 


默认 情况 下 ,【 源 】 下 拉 列 表 中 显示 选择 的 是 【 选 








中 的 图 层 】 选 项 。 此 时 ， 用户 可 根据 创建 需求 . 


设置 【 源 】 选 项 ， 设置 其 他 选项 ， 并 单 击 【 创 建 】 


按钮 。 
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在 3D 面板 中 ， 主 要 包括 下 列 一 些 选 项 。 

口 源 用 于 设置 3D 对 象 的 源 方 式 ， 包 括 选 
中 的 图 层 、 工 作 路 径 、 当 前 选区 、 文 件 4 
种 方式 。 

口 3D 明信片 ”选中 该 选项 , 可 将 2D 图 层 转 
换 为 3D 图 层 ， 并 且 具 有 3D 属性 的 平面 。 
其 中 ，2D 图 层 内容 作 为 材料 应 用 于 明 
信 片 两 面 ， 而 原始 2D 图 层 作 为 3D 明 
信 片 对 象 的 【 漫 射 】 纹 理 映 射出 现在 【图 
层 〗 面 板 中 ， 并 且 保 留 了 原始 2D 图 像 的 
尺寸 。 

口 3D 模型 选中 该 选项 ， 即 可 将 工作 环境 
转换 为 3D 环境 ， 此 时 在 画布 中 单 击 并 拖 
动 即 可 发 现 平面 图 像 转换 为 立方 体 。 

口 从 预 设 创建 网 格 选中 该 选项 ， 并 选中 相 
应 的 子 选项 ， 即 可 将 二 维 图 像 作为 立体 对 
象 中 的 一 个 面 。 另 外 ， 还 可 以 在 空白 图 层 
中 ， 创 建 各 种 预 设 3D 形状 对 象 。 

口 从 深度 映射 创建 网 格 选中 该 选项 ,可 将 
灰 度 图 像 转换 为 深度 映射 ， 从 而 将 明度 值 
转换 为 深度 不 一 的 表面 。 较 亮 的 值 生成 表 
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面 上 凸 起 的 区 域 ， 较 瞳 的 值 生成 四 下 的 区 
域 。 然 后 ， Photoshop 将 深度 映射 应 用 于 4 
个 可 能 的 几何 形状 中 的 一 个 ， 以 创建 3D 
模型 。 
口 3D 体积 


4.3.2 编辑 3D 对 象 


Photoshop 中 的 3D 模式 工具 组 主要 是 用 来 旋 
转 、 缩放 模型 或 调整 模型 位 置 。 当 操作 3D 模型 时 . 
场景 中 的 相机 视图 保持 固定 。 如 果 系 统 支持 
OpenGL， 还 可 以 使 用 3D 轴 来 操控 3D 模型 。 
1. 3D 模式 工具 组 

3D 模式 工具 组 包括 5 个 工具 ， 不 同 的 工具 其 
作用 也 有 所 不 同 。 当 【图 层 】 面 板 中 存在 3D 图 层 
时 ,选择 工具 选项 栏 中 3D 模式 工具 组 中 的 某 个 工 
具 , 即 可 在 工具 选项 栏 中 显示 3D 工具 组 中 的 所 有 
工具 与 选项 。 


该 选项 主要 针对 DICOM 文件 。 



































车 二 有 村 看 | owt: 同时 











3D 模式 工具 组 中 的 【旋转 3D 对 象 】 图 主要 
用 来 沿 工 轴 或 者 了 轴 旋 转 3D 对 象 : 而 【滚动 3D 
对 象 】 回 则 主要 用 来 沿 Z 轴 旋转 3D 对 象 , 但 是 两 
者 结合 Alt 键 能 够 临时 切换 工具 。 























使 用 【 拖 动 3D 对 象 】 图 与 【滑动 3D 对 象 】 
团 左 右 拖 动 时 ， 能 够 水 平移 动 3D 对 象 。 但 是 上 
下 拖 动 时 ， 则 通过 前 者 工具 可 以 垂直 移动 3D 对 
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象 . 而 通过 后 者 工具 则 可 以 将 3D 对 象 移 近 或 者 
移 远 。 








选择 3D 模式 工具 组 中 的 【缩放 3D 对 象 ] 史 |. 
上 下 拖 动 能 够 放大 或 者 缩小 3D 对 象 。 











不 同 的 3D 效果 ， 其 3D 模式 工具 组 中 的 工 
具 会 存在 细微 变化 。 





2. 3D 轴 

当 在 主 视图 中 单 击 3D 对 象 后 ， 即 可 在 3D 对 
象 中 心 位 置 显示 3D 轴 。 3D 轴 显 示 3D 空间 中 , 3D 
模型 当前 人 了 和 Z 轴 的 方向 。 








压缩 一 拉 长 3D 对 象 





3D 轴 的 操作 与 使 用 3D 对 象 工具 操作 3D 对 象 
的 效果 相同 。 所 以 .能够 将 前 者 作为 后 者 3D 对 象 
的 备 选 工具 。 单 击 3D 轴 上 方 并 且 拖 动 . 即 可 对 3D 








对 象 进行 操作 。 





口 移动 要 沿 着 下 了 或 Z 轴 移动 3D 对 象 ， 
可 以 指向 任意 轴 的 锥 尖 ， 以 任意 方向 沿 轴 
拖 动 即 可 。 

口 旋转 要 旋转 3D 对 象 ， 单 击 轴 尖 内 索 曲 
的 旋转 线段 ， 将 会 出 现 显 示 旋 转 平面 的 黄 
色 圆 环 。 这 时 国 绕 3D 轴 中 心 沿 顺 时 针 或 
逆 时 针 方向 拖 动 圆 环 即 可 。 

口 调整 大 小 要 调整 3D 对 象 的 大 小 ， 只 要 
向 上 或 向 下 拖 动 3D 轴 中 的 中 心 立方 体 
即 可 。 

口 压缩 或 拉 长 ”要 沿 轴 压缩 或 拉 长 3D 对 
象 ， 将 某 个 彩色 的 变形 立方 体 朝 中心 立 
方 体 拖 动 ， 或 拖 动 其 远离 中 心 立 方 体 
即 可 。 

口 限制 移动 ”要 将 移动 限制 在 某 个 对 象 平 
面 ， 可 以 将 鼠标 指针 移动 到 两 个 轴 交 叉 
(靠近 中 心 立方 体 ) 的 区 域 。 这 时 两 个 轴 
之 间 将 出 现 一 个 黄色 的 【和 平面】 图 标 ， 只 
要 向 任意 方向 拖 动 即 可 。 


4.3.3 设置 3D 对 象 属性 


3D 面板 是 单独 为 3D 对 象 而 建立 的 调整 工作 
平台 , 通过 该 面板 .可 以 轻松 地 对 3D 对 象 进行 创 
建 、 选择 ,以 及 查看 。 在 此 面板 中 也 可 以 为 当前 对 
象 添加 新 的 灯光 .但 是 要 想 详细 地 设置 材质 参数 、 
调整 灯光 位 置 及 光线 强度 等 选项 . 则 需要 在 【属性 】 
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面板 中 完成 。 
1. 3D 场景 设置 


使 用 3D 场景 设置 可 更 改 泻 染 模 式 、 选择 要 在 


其 上 绘制 的 纹理 或 创建 横 截面 。 单 击 3D 面板 中 的 
【 滤 镜 : 整个 场景 ] 按钮 . 然后 在 面板 项 部 选择 【 场 
景 】 选 项 . 即 可 在 【属性 】 面 板 中 查看 并 编辑 场景 


二 





的 各 个 选项 。 


















































【属性 】 面 板 中 ， 主 要 包括 下 列 一 些 选项 。 





口 预 设 ”该 选项 用 于 自 定义 泻 染 设置 ， 包 括 
外 框 、 深 度 映 射 、 法 线 等 17 种 设置 。 默 
认 选 项 为 【 自 定 】 选 项 ， 选 择 不同 的 选项 
可 应 用 相应 的 预 设 。 

口 横 截面 启用 该 复 选 框 , 可 对 切片 、 位 移 、 
倾斜 等 进行 设置 。 

口 表面 启用 该 复 选 框 ， 可 以 对 3D 对 象 的 
表面 样式 和 纹理 进行 设置 。 其 中 ,【 样 式 】 
选项 包括 实 色 、 常 数 、 外 框 等 11 种 样式 。 

口 线条 启用 该 复 选 框 ， 可 以 对 3D 对 象 的 
边缘 样式 、 宽 度 和 角度 阅 值 进行 设置 ， 从 
而 决定 3D 对 象 中 线条 的 显示 方式 。 

口 点 启用 该 复 选 框 ， 可 以 对 3D 对 象 的 样 
式 和 边境 进行 设置 ， 从 而 调整 顶点 的 外 
观 。 

口 线性 化 颜色 启用 该 复 选 框 ,可 以 显示 或 
隐藏 3D 对 象 线性 化 场景 的 阴影 样式 。 

口 背面 启用 该 复 选 框 ,可 以 显示 或 隐藏 3D 
对 象 背 面 的 线条 。 
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2. 3D 网 格 设置 

3D 模型 中 的 每 个 网 格 都 出 现在 3D 面板 项 部 
的 单独 线条 上 。 单 击 3D 面板 项 部 的 【 滤 镜 : 网 格 】 
按钮 日 ， 即 可 在 【属性 】 面 板 中 设置 应 用 于 网 格 的 
材质 和 纹理 数量 。 























如 果 模型 包含 多 个 网 格 ,每 一 个 网 格 都 会 具有 
一 定 的 材质 属性 . 无 论 是 颜色 还 是 图 像 . 甚至 更 力 
复杂 的 纹理 。【 属 性 】 面 板 中 的 材质 选项 包含 了 网 
格 的 基本 材质 属性 ， 分 别 介绍 如 下 。 
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在 【属性 】 面 板 中 , 不 仅 包括 【 网 格 】 选 项 组 . 
还 能 够 设置 【变形 】 选 项 组 、【 盖 子 】 选 项 组 以 及 
【坐标 】 选 项 组 。 

口 网 格 在 【网 格 】 选 项 组 中 ， 包 含 了 3D 

对 象 的 投影 设置 ， 以 及 变形 等 其 他 选项 组 

中 的 个 别 选项 。 





口 变形 在 【变形 】〗】 选 项 组 中 ， 不 仅 能 够 使 
用 预 设 的 变形 效果 ， 还 能 够 手动 对 3D 对 
象 进行 变形 ， 或 者 通过 设置 参数 值 进行 变 
形 。 

口 盖子 在 【盖子 】 选 项 组 中 可 以 设置 3D 
对 象 表面 的 斜面 与 膨胀 效果 。 在 【 边 】〗 下 
拉 列 表 中 包括 前 部 、 背 面 以 及 前 部 与 背面 
子 选 项 ， 下 面 以 前 部 为 例 设 置 其 效果 。 

口 坐标 在 【坐标 】 选 项 组 中 可 以 设置 3D 
对 象 在 3D 环境 中 的 位 置 ， 以 及 显示 的 尺 
寸 与 方向 。 该 选项 组 中 的 选项 只 是 将 3D 
模式 工具 组 中 的 工具 参数 化 ， 也 就 是 说 可 
以 更 加 精确 地 设置 3D 对 象 在 3D 环境 中 
的 显示 状态 。 


3. 3D 材质 设置 





单 击 3D 面板 项 部 的 【 滤 镜 : 材质 】 按 钮 


图 . 在 【属性 】 面 板 中 将 列 出 在 3D 对 象 中 使 用 的 
材质 。 








口 漫 射 指 材质 的 颜色 。 漫 射 映射 可 以 是 实 
色 或 任意 2D 内 容 。 如 果 选 择 移 去 漫 射 纹 
理 映射 ， 则 【 漫 射 〗 色 板 值 会 设置 漫 射 颜 
色 。 还 可 以 通过 直接 在 模型 上 绘画 来 创建 
漫 射 映射 。 

口 镜像 为 镜面 属性 显示 的 颜色 。 

口 发 光 是 不 依赖 于 光照 即 可 显示 的 颜色 。 
创建 从 内 部 照 亮 3D 对 象 的 效果 。 

口 环境 是 设置 在 反射 表面 上 可 见 的 环境 
光 的 颜色 。 该 颜色 与 用 于 整个 场景 的 全 局 
环境 色相 互 作 用 。 

口 闪 亮 是 设置 【光泽 】 时 所 产生 的 反射 光 
的 散射 。 低 反光 度 ( 高 散射 ) 产生 更 明显 
的 光照 ， 而 焦点 不 足 ; 高 反光 度 ( 低 散射 ) 
产生 较 不 明显 、 更 亮 、 更 起 眼 的 高 光 。 

口 反射 可 以 增加 3D 场景、 环境 映射 和 材 
质 表面 上 其 他 对 象 的 反射 。 

口 粗糙 度 ”用 来 设置 表面 材质 的 粗糙 强度 。 

口 凹凸 ”在 材质 表面 创建 凹凸 ， 无 需 改 变 底 
层 网 格 。 媚 是 映射 是 一 种 灰 度 图 像 ， 其 中 
较 亮 的 值 创建 突出 的 表面 区 域 ， 较 暗 的 值 
创建 平坦 的 表面 区 域 。 

口 不 透明 度 ”增加 或 减少 材质 的 不 透明 度 
(在 0~100% 范 围 内 )。 可 以 使 用 纹理 映射 
或 小 滑 块 来 控制 不 透明 度 。 

口 折射 、 在 场景 【品质 】 设 置 为 【光线 跟踪 】 
且 【 折 射 〗 选 项 已 在 【3D]〗>【 泻 染 设置 】 


对 话 框 中 选中 时 设置 折射 率 。 两 种 折射 率 
不 同 的 介质 (如 空气 和 水 ) 相交 时 ， 光 线 
方向 发 生 改 变 ， 即 产生 折射 。 新 材质 的 上 默 
认 值 是 1.0 (空气 的 近似 值 ) 。 
4. 3D 光源 设置 
在 专业 的 三 维 软 件 中 ，3D 对 象 最 终 需 要 在 光 
源 的 照射 下 , 才能 充分 展示 清楚 其 现实 情况 下 的 三 
维 轮廓 形态 。 同 样 ， 在 Photoshop 中 创建 的 3D 对 
象 , 给 它 添加 光源 及 控制 光源 的 强度 和 位 置 至 关 重 
要 。3D 光源 可 以 从 不 同 角度 照 亮 模型 ， 从 而 添加 
逼真 的 深度 和 阴影 。Photoshop 提供 了 三 种 类 型 的 











口 点 光源 ”该 类 型 光源 像 灯泡 一 样 ， 向 各 个 
方向 照射 。 


4.4 
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口 聚光灯 
形 光 线 。 
口 无 限 光 ”该 类 型 光源 像 太 阳光 一 样 ， 从 一 
个 方向 平面 照射 出 光线 。 
单 击 3D 面板 项 部 的 【 滤 镜 : 光源 】 按 钮 [8]. 
在 【属性 】 面 板 将 列 出 在 3D 对 象 中 照明 的 光源 选 
项 .对 各 选项 进行 相应 的 设置 即 可 。 


该 类 型 光源 照射 出 可 调整 的 锥 






































Photoshop 中 的 图 像 除了 可 以 用 于 印刷 外 ,还 
可 以 用 于 网 络 输 出 。 但 是 . 在 输出 图 像 之 前 . 用 户 
还 需要 根据 图 像 的 实际 质量 , 来 制作 图 像 的 切片 和 
优化 图 像 。 


4.4.1 制作 切片 


如 果 用 于 网 络 输出 的 图 片 太 大 . 可 在 图 片 中 添 
加 切片 , 将 一 张大 图 划分 为 若干 个 小 图 . 则 打开 网 
页 时 . 大 图 会 分 块 逐 步 显 示 . 缩短 等 待 图 片 显 示 的 
讨 间 。 
打开 图 像 ， 使 用 【切片 工具 】| 才 在 图 像 中 单 
击 并 拖 动 鼠标 以 创建 切片 。 创 建 切片 时 . 用 户 可 以 
在 工具 选项 栏 的 【样式 】 下 拉 列 表 框 中 选择 切片 的 
样式 。 
在 【样式 】 下 拉 列 表 中 ， 主要 包括 下 列 三 种 
样式 。 
口 正常 ”该 样式 允许 用 户 使 用 光标 绘制 任 
意 大 小 的 切片 。 
口 固定 长 宽 比 ”该 样式 允许 用 户 在 右 侧 的 
【 完 度 】 和 【高 度 】 等 输入 文本 域 中 输入 















































指定 的 大 小 比例 ,然后 再 通过 【切片 工具 】 
多 根据 该 比例 绘制 切片 。 
口 固定 大 小 ”该 样式 允许 用 户 在 右 侧 的 【 宽 
度 〗 和 【高 度 】〗 等 输入 文本 域 中 输入 指定 
的 大 小 ， 然 后 再 通过 【切片 工具 】| 罗 根据 
该 大 小 绘制 切片 。 
除了 以 上 三 种 样式 外 . 还 包含 了 一 个 【基于 参 
考 线 的 切片 】 按 钮 。 如 下 图 包含 的 参考 线 , 单 击 该 
按钮 后 ， 则 Photoshop 会 根据 参考 线 绘制 切片 。 





创建 切片 完成 后 ， 可 以 通过 【切片 选择 工具 】 
知 单 击 或 拖 动 切片 ， 调 整 切片 的 大 小 和 位 置 。 
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4.4.2 ”优化 图 像 


由 于 考虑 到 网 速 等 原因 ， 上 传 的 图 片 不 能 太 
大 . 这 时 就 需要 对 Photoshop 创建 出 的 图 像 进 行 优 
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化 .通过 限制 图 像 颜 色 等 方法 来 压缩 图 像 的 大 小 。 
【导出 】| 【存储 为 Web 和 设备 所 用 
在 弹出 的 对 话 框 中 





执行 【文件 】 
格式 (旧版 )】 命 令 . 
优化 选项 。 


存 壬 为 Web 册 用 格式 (25%) 





为 


“或 志 这 单 过 二 必 民 可 更 疏 可 地 导 区 源 
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ex 
| > 下 Jmx Le 
5 画 
[3 
[i | Able: 一 “上 ia 制 : 一 条 引 一 
| 四 了 E77 ] Ez 
在 该 对 话 框 中 ， 位 于 左 侧 的 是 预览 图 像 窗口 ， ”可 以 从 【 预 设 】 下 拉 列 表 中 选择 仿 色 选项 ,在 该 下 
在 该 窗口 中 包含 4 个 选项 卡 . 它们 的 功能 如 下 表 所 ” 拉 列 表 中 包含 12 个 预 设 的 仿 色 格 式 ， 其 
示 ; 而 位 于 右 侧 的 是 用 于 设置 切片 图 像 仿 色 的 选项 。 参数 值 越 高 . 优化 后 的 
名 称 功 能 颜色 就 越 接近 图 像 的 原 有 颜色 。 
原稿 | 单 击 该 选项 卡 ， 可 以 3 有 优化 的 图 像 最 后 . 单 击 【 存 储 】 按 钮 . 在 弹出 的 【将 优化 
信人 | 下 二 让 这 项 下 ， 可 以 于 示 应 用 了 当前 仿 化 结果 存储 为 】 对 话 框 中 设置 【文件 名 】 选项, 单 击 
设置 的 图 像 【保存 】 按 钮 即 可 将 图 像 保 存 。 
双 联 | 单 击 该 选 页 卡 ， 可 以 并 排 显示 原稿 和 优化 和 
过 的 图 像 
音 击 该 选项 卡 ， 可 以 并 排 显示 4 个 图 像 ， 了 
四 联 | 左上 方 为 原稿 ， 单 击 其 他 任意 一 个 图 像 ， 本 
可 为 其 设置 一 种 优化 方案 , 以 同时 对 比 相 Dasx omnes 
互 之 间 的 差异 ， 并 选择 最 佳 的 方案 
通常 ,如 果 图 像 包 含 的 颜色 多 于 显示 器 能 显示 tt i | 
的 颜色 . 那么 . 浏览 器 将 会 通过 混合 它 能 显示 的 颜 区 王 
切片 所 在 切 片 





色 . 来 对 它 不 能 显示 的 颜色 进行 仿 色 或 靠近 。 用户 




















元 潮 据 ， 声 权 和 联系 信 龟 




















图 像 质量 就 越 高 , 能 显示 的 












































第 4 章 网 页 界面 设计 








练习 : 制作 喷 溅 边框 





喷 溅 边框 是 当前 较为 流行 的 数码 相框 之 一 ,该 边框 通常 用 于 时 
尚 、 张 扬 的 个 性 照片 ， 能 够 表达 人 物 追 求 自我 的 个 性 。 在 本 练习 中 . 
将 运用 蒙 版 和 滤 镜 等 功能 .来 详细 介绍 喷 溅 边框 的 制作 方法 和 实用 
技巧 。 





: 
: 
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2 Se SE 


TT 
二 








操作 步骤 “》》》 得 到 “图 层 1” 图 层 。 然 后 选择 “背景 * 图 层 ， 








复制 图 层 
使 用 短 形 选 框 工 具 


使 用 扭曲 滤 镜 
使 用 像素 化 滤 镜 
使 用 画笔 描 边 滤 镜 
设置 图 层 样式 














STEP|01 执行 【文件 】 | 【打开 】 命 令 ， 选 择 本 书 ”执行 【编辑 】| 【填充 】 命 令 ， 将 【内 容 】 选 项 设 
配套 光盘 中 相应 章节 的 “个 性 照片 jpg ”素材 图 片 。 置 为 【白色 】， 单 击 【 确 定 】 按 钮 ， 将 图 层 背 景 填 














充 为 白色 。 


湿 合 
植 式 [M); 
不 通明 度 (0): |100 
口 保留 送 明 区 域 四 


内 (0): 






































STEP|02 按 下 组 合 键 Cal+J 复制 “背景 ”图 











按钮 . 在 “图 层 1] 





策 





图 


司 层 中 绘制 一 个 选区 














STEP|03 单 击 【 工 具 箱 】 中 的 【和 矩 形 选 框 工具 】 











STEP|04 在 【工具 箱 】 面 板 中 ， 单 击 【以 快速 蒙 ” STEP|07 执行 【 滤 镜 】|【 波 镜 库 】 命 令 ， 在 弹出 
版 模式 编辑 】 按 钮 ， 进入 快速 蒙 版 模式 。 的 对 话 框 中 , 选择 【画笔 描 边 】 栏 中 的 【 喷 溅 】 选 
项 . 并 设置 各 项 参数 。 











咕 狂 
坑 色 半径 (E) 


成 有 Bi 条。 王 水 轮 衣 






平 测度 (8) 

















STEPI08 执行 【小 镜 】| 【扭曲 】|【 挤 压 】 命 令 . 
STEPI05 执行 【 波 镜 ] | 【像素 化 ]】| 【 晶 格 化 】 命 。 在 弹出 的 【 挤 压 】 对 话 框 中 设置 【数量 】 参数。 








令 ,， 在 弹出 的 【 晶 格 化 】 对 话 框 中 设置 各 项 参数 。 re 
百 画 CI < > 
| 单元 格 大 小 CD) | EE 











STEP|09 执行 【小 镜 】| 【扭曲 】| 【旋转 扭曲 】 命 
STEP|06 执行 【小 镜 】| 【像素 化 】| 【碎片 ] 命令， 令 ， 在 弹出 的 【旋转 扭曲 】 对 话 框 中 设置 【角度 】 
对 当前 蒙 版 进行 碎片 处 理 。 参数 。 






























STEP|10 单 击 【 工 具 箱 】 面 板 中 的 【以 标准 模式 
编辑 】 按 钮 , 退出 快速 蒙 版 模式 ,系统 将 自动 根据 
蒙 版 的 形状 转换 为 选区 








STEP|13 双击 “图 层 1” 图 层 ， 在 弹出 的 【图 层 
样式 】〗 对 话 框 中 ,启用 【投影 】 复 选 框 并 将 【 颜 
色 】 设 置 为 黑色 .并 设置 其 他 相应 参数 。 























A 


STEP|11 按 组 合 键 CtltShifttI 对 选区 进行 反选 操 





选 
作 后 ,执行 【选择 】|【 变 换 选 区 】 命 令 。 然 后 


”STEP|14 在 【图 层 样式 】 对 话 框 中 ， 启 用 【 描 边 】 
右 击 执行 【水 平 翻转 】 命 令 ， 并 按 回 车 键 。 


复 选 框 并 将 【颜色 】 设 置 为 蓝 色 (#12a9f8) 后 ， 
即 可 得 到 蓝 色 的 喷 溅 边框 。 














oe 




















tg 


pt 











STEP|12 按 Delete 键 删除 所 选区 域 中 的 


















网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 


练习: 制作 网 页 首页 


网 站 的 外 观 最 能 决定 网 站 所 具备 的 价值 。 一 个 设计 精美 的 网 站 . 














其 产品 或 服务 质量 也 很 有 竞争 力 , 所 促成 的 销售 量 会 是 很 高 的 。 而 网 @ 新 建 项 目 
站 色彩 也 对 人 们 的 心情 产生 影响 .不 同 的 色彩 及 其 色调 组 合 会 使 人 们 @ 使 用 乱 形 先 框 工具 
产生 不 同 的 心理 感受 。 在 本 练习 中 ,将 以 草绿 色 为 基本 色调 ,运用 @ 使 用 渐变 县 加 样式 
Photoshop 中 的 基础 功能 .来 制作 一 个 购物 网 站 的 网 页 首页 。 @ 使 用 矩形 工具 

@@ 水 平 缩放 图 像 
人 wma @ 使 用 钢笔 工具 

@ 添加 蒙 版 

@ 使 用 渐变 工具 

@ 设置 字体 格式 





家 
“a 









































































































































笋 码 产 品 哪里 我 7 
脑 条 
操作 步骤 “》》》 选 框 工具 】 按 钮 ， 在 图 层 中 绘制 一 个 矩形 选区 。 
STEP|01 执行 【文件 】 | 【新建 】 命 令 ， 在 弹出 的 一。 入 
【新 建 】 对 话 框 中 设置 参数 ,并 单 击 【 确 定 】 按钮 。 
RR 
文档 类 弄 ( 攻 : [ 自 定 
大 小 中 
宽度 (W): | 1024 
高 度 (H): |750 
分 锥 率 (R): [72 [ 信 才 /英寸 。] 
颜色 模式): [R68 颜色 <:] [8 位 <] 
将 县 内 容 j: [8 色 JL] 图 你 大 小 : 
二 为 zam STEP|03 执行 【编辑 】| 【填充 】 命 令 ， 在 弹出 的 
计生 和 【填充 】 对 话 框 中 . 将 【内 容 】 设 置 为 【颜色 】. 并 
像素 长 宽 比 (X): | 方形 像素 My 
| 在 弹出 的 【 拾 色 器 (填充 颜色 )】 对 话 框 中 设置 填 
充 色 。 
STEP|02 新 建 图 层 “ 绿 背景 ”图 层 . 单 击 【 和 矩形 





: 网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 





第 4 章 网 页 界面 设计 








EE 可 $TEPI06 打开 PSD 格式 的 “花纹 ” 素材 , 将 其 放 
刷 置 于 首页 文档 中 ,并 将 【混合 模式 ] 设置 为 【 滤 色 ]。 


ns ne. 
| EW FA FAN RN FN NR 
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壤 [(D 设 置 
不 透 用 广 (0): | 100 % 
口 保留 适 明 区 域 (P) 










































口 只 有 Web 颜色 














#7 加 E 


icy 2M 时， 



































STEP|04 双击 该 图 层 , 打开 【图 层 样式 】 对 话 框 ， 
启用 【渐变 到 加】 复 选 框 , 然后 在 右 侧 设置 相应 的 STEP|07 单 击 【 工 具 箱 】 面 板 中 的 【设置 前 景色 】 
























































































































参数 ， 并 单 击 渐变 条 。 按钮 ， 在 弹出 的 【 拾 色 器 (前 景色 )】 对 话 框 中 ， 
将 前 景色 设置 为 15% 的 灰色 。 
一 省 基本 加 王 四 
渐变 按 色 器 ( 前 晤 色 ) 
混合 模式 (9); [ 正 党 引 口 钝 i 
和 并 一 [oo ]% 3 
2-] 口 Row sa | 
样式 吕 : [线性 引 加 5 图 层 M 齐 四 ne 
角度 (N): (1) -90 | 度 重要 对 齐 | 的 
纺 (S: 一 0 一 一 [oo ]% ED | 
| 6 
| 设置 为 默认 值 M3 ]% 
DAA we me [3 |% 
STEP|05 然后 ,在 弹出 的 【渐变 编辑 器 】 对 话 框 Em 
中 , 在 75 位 置 处 添加 色 标 ， 并 分 别 设置 色 标 的 填 
> We STEP|08 单 击 【 工 具 箱 】 面 板 中 的 【 答 形 工具 】 





按钮 . 在 图 层 中 绘制 一 个 W 为 220 像素 . 阳 为 142 
本 中 。 像素 的 矩形 形状 。 
E 


I 
四 











CWE WP WN 5 [NE FEN NE- NEN 











名 称 N): | 自 定 | [新 建 (w) ] 
新 变 类 型 :| 实 底 。 
平滑 度 M): [100| - ] % 


可 es ne | 


二 [acooo0 FEeamw | STEP|09 按 住 Ctrl 键 单 击 当 前 图 层 缩 览 图 , 执行 
”| [选择 ] | [变换 选区 】 命 令 单 击 【工具 选项 栏 

上 的 【保持 长 宽 比 】 按 钮 蝇 。 设 置 【水 平 缩放 】 为 

1109%6， 将 选区 扩大 ， 并 按 Enter 键 结束 变换 。 






























































闫 色 : » 位 置 : % 删除 (D 



































STEP|10 然后 ， 在 和 矩形 下 方 新 建 图 层 “ 项 白 框 ”. 
并 将 其 填充 白色 ， 取 消 选 区 。 





STEP|11 按照 上 述 方法 ， 分 别 在 该 图 形 左边 和 右 
边 绘制 两 个 小 型 相框 。 





STEP|12 打开 “光量 ”素材 ， 将 其 添加 到 当前 文 
档 中 , 将 该 图 层 调整 至 “花纹 ”图 层 上 方 . 并 修改 
图 层 名 称 。 













STEP|13 打开 “标志 .psd” 文 件 ， 将 该 文件 内 的 
标志 和 文本 添加 到 当前 文档 中 .并 调整 其 大 小 和 








STEP|14 添加 “电脑 ”素材 ， 按 快捷 键 CultJ 复 
制图 层 。 并 按 快捷 键 CtrltT 将 图 像 进行 水 平 翻转 
后 垂直 向 下 移动 。 














STEP|15 选中 “电脑 拷贝 ”图 层 , 单 击 【 和 矩形 选 
框 工具 】 按 钮 . 建立 选区 , 并 按 快捷 键 Ctrl+Shift+I 
反选 选区 。 











STEP|16 单 击 【 图 层 】 面 板 下 的 【添加 图 层 蒙 版 
按钮 . 对 图 层 添加 蒙 版 . 将 选区 以 外 的 副本 图 像 庆 








盖 。 设 置 该 图 层 【 不 透明 度 】 为 10%。 








STEP| 们 在 “电脑 ”图 层 下 方 新 建 图 层 “ 投 影 ”， 
使 用 【钢笔 工具 】 建 立 路 径 。 将 路 径 转 换 为 选区 , 
并 填充 为 黑色 。 








STEP|18 取消 选区 ， 设 置 该 图 层 的 【不 透明 度 】 
为 20%， 并 使 用 【橡皮 擦 工具 】 进 行 涂抹 。[【 画 笔 
大 小 】 和 【不 透明 度 】 可 根据 实际 随时 更 改 。 








”图 片 ， 按 快捷 键 CtlH+T 打 
开 变 换 框 , 等 比例 缩小 。 按 住 Ctrl 键 单 击 调整 控制 
柄 ， 使 图 像 与 电脑 屏幕 重合 。 

STEP|20 添加 “鸽子 ”素材 . 使 用 【钢笔 工具 】 
建立 路 径 。 











STEP|21 然后 , 右 击 选 区 执行 【建立 选区 】 命 令 ， 
将 【羽化 半径 】 设 置 为 20 像素 ， 羽 化 选区 。 








STEP|22 新 建 图 层 “ 光 ”. 单 击 【 工 具 栏 】 中 的 
【渐变 工具 】 按 钮 ， 同 时 单 击 【 工 具 选 项 栏 】 上 的 
【线性 渐变 】 按 钮 .设置 白色 到 透明 色 渐 变 。 在 画 
布 上 执行 渐变 ， 取 消 选 区 。 




















网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 





STEP|23 打开 “音符 “绿叶 ”素材 ， 并 放置 于 STEP|25 分 别 打开 “手机 “笔记 本 ”素材 ,并 





























首页 文档 中 。 放置 于 其 他 两 个 相框 图 像 中 。 
EE [El WM OM [rm i 
EE 
”加 局 
多 
3 Ea me 
ow Ea aa 有， el 








STEP|24 打开 “相机 ”素材 ， 放 置 于 较 大 的 相框 ”STEP|26 单 击 【 工 具 箱 】 中 的 【 横 排 文字 工具 】 
图 像 上 ,将 相机 所 在 的 图 层 放置 在 该 形状 相框 图 层 ”工具 ,输入 宣传 语 ， 并 设置 文本 属性 。 
上 ,并 将 鼠标 放 在 两 图 层 之 间 ， 按 住 Alt 键 单 击 。 WE WE WN Pg 


























[EN E:T NE ON :WN WN ME. NE NN ~ 一 1 习 
数 而 产品 那里 找 7 | 
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练习 1: 制作 弹出 式 窗口 动画 广告 始 月 拍 拍 
个 downloadsW4\ 新 手 训练 营 \ 弹 出 式 窗口 动画 广告 

提示 : 本 练习 中 . 首先 新 建文 档 . 同时 新 建 图 层 . 机 3005 人 
并 设置 图 层 的 渐变 填充 背景 色 。 同 时 . 新 建 图 层 . 并 U8 
为 图 层 添加 花朵 填充 效果 。 使 用 【 横 排 文 字 工具 】 输 金 场 隐 价 销 | 入 














入 横 排 文字 , 设置 文字 格式 并 依次 为 每 段 文本 添加 图 
层 样式 。 然 后 ,新建 图 层 . 使 用 绘制 工具 绘制 素材 背 
景 . 并 依次 设置 背景 方 框 的 填充 和 图 案 效果 。 为 素材 
青 景 方 框 添加 图 像素 材 , 并 调整 其 大 小 和 位 置 .最 后 . 
使 用 绘制 工具 绘制 拍 拍 形状 . 设置 图 层 样式 并 调整 形 
状 位 置 。 在 拍 拍 形状 上 输入 拍 拍 字符 . 并 设置 字符 的 
字体 格式 。 同时， 输入 其 他 横 排 文 字 ， 并 设置 文字 效 | 练习 2: 制作 摄影 网 站 Banner 

果 。 绘 制 参与 形状 , 设置 形状 的 图 层 样式 . 输入 文本 全 downloads4\ 新 手 训练 营 \ 摄 影 网 站 Banner 
并 设置 文本 的 字体 格式 。 提示 : 本 练习 中 ,首先 新 建 黑色 背景 的 文档 , 新 


ty 










































































建 图 层 . 为 其 设置 渐变 夫 加 样式 . 形成 径 向 渐变 背景 
色 。 同 时 .运用 图 层 蒙 版 、【 画 笔 工 具 】 和 【矩形 选 
框 工具 】、 【椭圆 工具 】 绘制 多 个 发 光 效果 不 同 的 圆 环 . 
制作 背景 图 案 。 然 后 .绘制 放映 栏 ， 通 过 渐变 埃 加 、 
外 发 光 、 内 发 光 等 图 层 样式 . 设置 放映 栏 外 观 效 
果 。 同 时 ,绘制 外 边框 ,设置 边框 样式 ,输入 文本 
并 设置 文本 样式 。 最 后 , 运用 【动画 】 面 板 . 制作 动 
画 Banner。 


图 
























































引 之 美 摄影 工作 室 


Elopant Donutlfu) photorreohy 
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练习 3: 制作 墨 印 效 果 
人 downloadsv4\ 新 手 训练 营 \ 制 作 墨 印 效果 
提示 : 本 练习 中 , 首先 新 建文 档 , 添加 素材 图 像 。 
复制 图 层 ， 并 设置 图 层 的 色相 和 饱和 度 。 添 加 插画 图 
层 ， 并 设置 图 层 的 位 置 。 然 后 ， 复 制 插画 图 层 ， 并 设 
置 图 层 的 色相 和 饱和 度 。 最 后 ,创建 组 1 图 层 ,在 组 
图 层 中 创建 新 图 层 ,添加 素材 ,复制 图 层 并 分 别 设置 
图 层 的 色相 和 饱和 度 。 























练习 4: 制作 钻石 文字 
中 downloads\4\ 新 手 训练 营 \ 钻 石 文字 
提示 : 本 练习 中 ,首先 新 建文 档 . 输入 文本 并 设 
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置 其 字体 格式 。 新 建 并 合并 图 层 . 隐藏 该 图 层 并 运用 
【扭曲 】 滤 镜 增加 图 层 效果 。 同 时 .设置 图 层 的 描 边 、 
斜面 和 浮雕 效果 。 然后 . 根据 图 层 样式 创建 多 个 图 层 . 
设置 图 层 填充 色 . 并 创建 图 层 之 间 的 剪 切 蒙 版 。 最后. 
新 建 调整 图 层 . 设置 色相 和 饱和 度 。 使 用 【多 边 形 了 
具 】 绘 制 四 角形 , 合并 相应 图 层 ， 并 设置 文本 的 【 泻 
染 】 滤 镜 效果 。 





















































练习 5: 制作 海报 卷 页 效果 

全 downloads\4\ 新 手 训练 营 \ 制 作 海报 卷 页 效果 

提示 : 本 练习 中 ,首先 新 建文 档 . 使 用 【矩形 工 
具 】 绘 制 矢 量 形状 ,并 使 用 【路 径 选 择 工具 】〗 和 【 钢 
笔 工 具 】 绘 制 调整 形状 路 径 。 将 路 径 转换 为 选区 ， 并 
设置 对 角 线 性 渐变 填充 效果 。 然 后 ,新 建 图 层 ,使 用 
【多 边 形 套 索 工具 】 绘 制 选 区 ， 并 设置 对 角 线 性 渐变 
填充 效果 。 载 入 图 层 选区 ， 为 其 添加 描 边 图 层 样式 ， 
制作 卷 页 效果 。 最后. 新 建 图 层 . 使 用 【橡皮 擦 工具 】 
绘制 页 面 卷 起 的 白色 高 光 部 分 。 同 时 ,使 用 【加 深 工 
具 】 设 置 页 面 卷 起 的 中 间 调和 曝光 度 。 
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网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 








练习 6: 制作 网 页 切片 
人 downloads\ 新 手 训练 营 \ 制 作 网 页 切片 
提示 :本 练习 中 , 首先 打开 素材 文件 . 显示 页 面 
标尺 。 向 下 拖 动 标尺 显示 标尺 线 。 然 后 ,根据 切片 位 
置 添加 多 条 标尺 线 。 单 击 【 切 片 工具 】 按 钮 ， 同 时 单 
击 【工具 选项 栏 】 中 的 【基于 参考 线 的 切片 】 按 钮 ， 
根据 标尺 线 显示 切片 效果 。 最 后 ,使 用 【切片 工具 】 
在 切片 区 域内 根据 图 片 大 小 . 将 切片 区 域 划分 为 各 个 
矩形 区 域 。 






































练习 8: 制作 油画 效果 
人 downloadsv4\ 新 手 训练 营 \ 制 作 油画 效果 
提示 : 本 练习 中 .首先 打开 素材 图 像 设置 图 像 
阴影 和 高 光 效 果 。 然 后 ， 复 制图 层 ， 设 置 新 图 层 中 图 
像 的 色彩 饱和 度 。 同 时 ， 为 图 像 添加 【艺术 效果 】 
滤 镜 。 最 后 ， 为 图 像 添 加 【画笔 描 边 】 和 【扭曲 ] 
滤 镜 。 









































练习 7: 制作 版 画 效果 
全 downloads\4\ 新 手 训 练 营 \ 制 作 版 画 效果 
提示 : 本 练习 中 , 首先 打开 素材 文件 . 将 “背景 











图 层 连 续 三 次 拖 动 至 【创建 新 图 层 】 按 钮 上 ， 分 别 得 
到 三 个 副本 图 层 ， 并 隐藏 项 层 的 两 个 图 层 。 然 后 ,为 
“背景 副本 ”图 层 添加 【艺术 效果 】 滤 镜 。 取 消 隐藏 
图 层 ， 并 为 该 图 层 添 加 【素描 】 滤 镜 ， 同时 设置 该 图 
层 的 混合 模式 和 不 透明 度 。 最 后 , 创建 新 的 填充 或 调 
整 图 层 ， 并 设置 图 层 的 色相 和 饱和 度 。 





















































动画 可 以 为 网 站 的 页 面 添加 独特 的 动态 效果 ， 使 页 面 内 容 更 加 丰富 而 具有 动感 。Flash 作为 目前 网 
页 最 流行 的 动画 形式 之 一 ， 一 直 以 其 独特 的 魅力 吸引 着 无 数 的 用 户 。 网 站 中 的 很 多 元 素 都 可 以 由 Flash 
来 完成 ， 如 网 站 进入 动画 、 导 航 菜单 、 图 片 展 示 动画 、 动 画 按钮 ， 以 及 网 页 中 经 常 使 用 的 透明 动画 等 。 

本 章 将 介绍 Flash 动画 的 一 些 基本 知识 ,包括 基本 界面 和 新 增 功 能 ,以 及 导入 素材 .绘制 矢量 图 形 、 
编辑 动画 文本 等 内 容 ， 为 用 户 制作 多 彩 的 动画 奠定 基础 。 








网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 








Flash CC 简介 








Flash CC 是 由 Adobe 公司 开发 的 一 种 基于 可 5.1.1 Flash CC 的 工作 界面 
视 化 界面 而 且 带 有 强大 编程 功能 的 动画 设计 与 制 
Flash CC 是 Adobe 创作 套件 CC 的 一 个 重要 组 


作 软件 。 由 于 Flash CC 易于 上 手 且 制 作出 的 动画 
es Ri dain 成 部 分 ， 其 应 用 了 Adobe 创作 套件 的 统一 风格 界 
人 面 。 在 Flash CC 的 主 界面 中 ， 包 含 【 菜 单 栏 ]、 选 


Flash 与 各 种 网 页 的 应 用 相互 结合 ， 构 成 完整 的 互 项 卡 式 的 【文档 】 窗 格 、【 时 间 轴 】/【 输 出 】 面 板 、 















































联网 程序 。 【属性 】/【 库 】 面 板 .【 工 具 箱 】 面 板 等 组 成 部 分 。 
属 
茉 -| FL 六 Hp 日 9m 狐 NI RM 文 训 S 昌 2o 三 中 窗口 QW) 得 本 re. ols 
单 es 
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EE > TO 组 
袍 文件 : pdauk 
家 
窗 Bl Br] 具 
格 WME: [senseptio lv] A 箱 
| 下 
ET 板 
2 | wan | 
间 QO 场 
和 一 一 ec 
出 雪子 BE] Es 
面 
板 
1. 菜单 栏 部 分 之 一 , 其 作用 是 现实 绘制 的 图 形 图 像 . 以 及 畏 
Flash 与 同 为 Adobe 创作 套件 的 其 他 软件 相 比 ” 助 绘制 的 各 种 参考 线 。 
最 典型 的 特征 就 是 没有 标题 栏 .Adobe 公司 将 Flash 在 默认 状态 下 , 【文档 】 窗 格 以 选项 卡 的 形式 


的 标题 栏 和 菜单 栏 集成 到 了 一 起 , 以 求 在 有 限 的 屏 ”显示 当前 打开 的 所 有 Flash 影片 文件 、 动 作 脚 本 文 
幕 大 小 中 尽 可 能 多 地 将 空间 留 给 【文档 】 窗 格 。 件 等 。 用 户 可 通过 拖 动 选项 卡 名 称 的 方法 , 将 选项 
在 菜单 栏 中 . 包含 了 设计 和 制作 Flash 动画 时 卡 切 换 为 窗口 形式 。 
所 需要 的 所 有 11 个 命令 菜单 。 在 菜单 栏 右 侧 . 新 
增 了 【同步 设置 状态 】 按 钮 ,帮助 用 户 将 所 涉及 的 
内 容 同步 到 云 中 。 在 【同步 设置 状态 】 按 钮 右 侧 的 
是 【工作 区 切换 器 】 菜 单 ,提供 了 一 些 预制 的 工作 
区 布局 供用 户 选择 使 用 。 同 时 ， 还 允许 用 户 创建 、 
存储 和 编辑 自 定义 的 工作 区 布局 。 
2. 文档 窗 格 
【文档 】 窗 格 是 Flash 工作 区 中 最 重要 的 组 成 
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注 三 网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 ::: 


同样 ， 用 户 也 可 单 击 窗口 形式 的 【文档 窗 格 】 
标题 栏 ,将 其 拖 自 至 【文档 窗 格 】 区 域 的 顶端 将 
其 切换 为 选项 卡 形式 。 

【场景 ] 工具 栏 的 作用 是 显示 当前 场景 的 名 称 . 
并 提供 一 系列 的 显示 切换 功能 . 包括 元 件 间 的 切换 
和 场景 间 的 切换 等 .【 场 景 ]】 工具 栏 中 自从 左 至 右 
分 别 为 【后 退 】 按 钮 图 、 【场景 名 称 】 文 本 字段 、 
【编辑 场景 】 按 钮 国 【编辑 元 件 】 按 钮 加 | 【和 舞 合 
居中 】 按 钮 围 等 内 容 。 
3. 时 间 轴 | 输出 面板 

时 间 轴 是 指 动画 播放 所 依据 的 一 条 抽象 的 轴 
线 。 在 Flash 中 .将 这 条 抽象 的 轴线 具象 化 到 了 一 
个 面板 中 ， 即 【时 间 轴 】 面 板 。 
与 时 间 轴 面板 共存 于 一 个 面板 组 的 还 有 【和 输 
】 面 板 。 分 别 单 击 面板 组 中 的 选项 卡 ,可 在 这 两 
面板 间 进 行 切换 。 单 击 选 项 卡 的 空位 , 可 以 将 整 
面板 组 设置 为 显示 或 隐藏 。 
4. 属性 | 库 面 板 

【属性 ] 面板 又 被 称 作 【属性 ] 检查 器 . 是 Flash 
中 最 常用 的 面板 之 一 。 选 择 Flash 影片 中 的 各 种 元 
素 后 , 即 可 在 【属性 ] 面板 中 修改 这 些 元 素 的 属性 。 

【 库 】 面 板 的 作用 类 似 一 个 仓库 ， 其 中 存放 着 
当前 打开 的 影片 中 所 有 的 元 件 。 用 户 可 直接 将 【 库 】 
面板 中 的 元 件 拖 遇 到 舞台 场景 中 . 或 对 【 库 】 面 板 
中 的 元 件 进行 复制 、 编 辑 和 删除 等 操作 。 
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如 果 库 面板 中 的 元 件 已 被 Flash 影片 引用 ， 
则 删除 该 元 件 后 ,舞台 场景 中 已 被 引用 的 元 
件 也 会 消失 。 





5. 工具 箱 面板 

在 【工具 箱 】 面 板 中 ， 列 出 了 Flash 中 常用 的 
30 种 工具 ,用户 可 以 单 击 相应 的 工具 按钮 ,或 按 
下 这 些 工具 所 对 应 的 快捷 键 , 来 调用 这 些 工具 。 

一 些 工具 是 以 工具 组 的 方式 存在 的 (工具 组 的 
右 下 角 通 常 有 一 个 小 三 角 标志 ) ， 此 时 ， 用 户 可 以 
右 击 工具 组 ， 或 者 按 住 工具 组 的 按钮 3s， 均 可 打 
开 该 工具 组 的 列表 ,在 列表 中 选择 相应 的 工具 。 


5.1.2 Flash CC 的 新 增 功能 


Flash CC 2015 是 由 Adobe 最 新 更 新 的 一 款 动 
画 制 作 软件 , 支持 Windows 和 MAC 系统 , 同时 还 
增加 了 对 HTMLS5 技术 的 支持 。 除 此 之 外 ,Flash CC 
2015 还 具有 下 列 新 增 功能 。 

1. 改进 的 新 动画 编辑 器 

改进 后 的 新 动画 编辑 器 可 使 用 户 的 细 调 补 间 
动画 体验 显得 更 为 流畅 . 不 仅 可 以 从 时 间 轴 中 方便 
地 访问 动画 编辑 器 ， 而 且 还 集中 于 属性 曲线 的 编 
辑 ， 从 而 大 幅度 地 提高 了 其 易 用 性 。 

使 用 改进 后 的 动画 编辑 器 , 通过 简单 的 几 步 即 
可 创建 复杂 而 高 度 吻合 的 补 间 , 从 而 可 以 模拟 对 象 
的 真实 行为 。 

2. 创建 和 发 布 WebGL 内 容 

Flash CC 2015 新 增 了 一 个 包含 预 设 文档 和 发 
布设 置 的 新 文档 类 型 WebGL( 预 览 ), 以 方便 用 户 在 
Flash 中 通过 时 间 轴 、 工 作 区 、 工 具 等 功能 加 速 处 
理 、 泻 染 和 生成 WebGL 内 容 。 

注意 

WebGL 文档 类 型 是 一 个 试验 性 功能 ， 它 仅 



























































支持 预览 和 有 限 的 交互 性 。 


3. 导出 为 SVG 格式 
Flash CC 2015 允许 用 户 将 文件 导出 为 
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网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 





SVG(Scalable Vector Graphics， 可 伟 缩 矢量 图 形 ) 格 
式 ， 从 而 可 以 在 缩放 时 不 产生 栅 格 (分 辩 率 无 关 ) 的 
情况 下 ， 生 成 品质 卓越 的 图 形 。 而 SVG 是 用 于 创 
建 和 发 布 矢量 图 形 的 一 种 开放 的 Web 标准 . 使 用 
SVG 不 仅 可 以 创建 高 品质 的 视频 ， 而 且 还 可 以 将 
其 嵌入 到 大 多 数 网 页 中 。 
4. 与 Adobe Creative Cloud 实现 工作 区 

同步 

Flash CC 2015 新 增 了 工作 区 同步 Creative 
Cloud 的 功能 ， 在 新 版 本 中 用 户 可 以 将 Flash CC 
2015 工作 区 设置 与 Creative Cloud 保持 同步 . 从 而 
满足 用 户 在 多 台 计 算 机 上 同步 自 定义 工作 区 设置 
的 愿望 。 
5. 新 增 HTML 5 扩展 功能 

Flash CC 2015 新 增 了 HTML 5 扩展 功能 ， 运 
用 该 功能 用 户 可 以 使 用 HTML 对 Flash CC 进行 功 
能 扩展 。 

新 版 本 的 Flash CC 不 仅 支持 使 用 Extension 
Builder 3 打包 的 HTML 扩展 ,而 且 还 可 以 使 用 
Adobe Exchange 下 载 这 些 扩展 ， 并 在 Flash CC 中 
使 用 Adobe Extension Manager 对 它们 进行 管理 。 
6. 对 具有 可 变 宽度 的 笔触 进行 补 间 

Flash CC 2015 新 增 了 对 具有 可 变 宽 度 的 笔触 
进行 形状 补 间 功 能 , 运用 该 功能 不 仅 可 以 对 使 用 可 
变 宽度 工具 创建 的 花 式 笔触 进行 补 间 , 而 且 还 可 以 
对 一 些 与 默认 或 自 定义 宽度 配置 文件 相关 联 的 实 
心 笔触 进行 补 间 。 
7. 使 用 可 变 宽度 工具 增强 笔触 

通过 使 用 新 增 的 可 变 宽度 工具 可 以 增强 笔触 
的 表现 力 , 以 增加 舞台 上 绘图 的 各 种 笔触 和 形状 的 
粗细 度 。 除 此 之 外 ,新 版 本 的 Flash 还 可 以 创建 并 
保存 宽度 配置 文件 , 以 方便 用 户 将 其 用 于 舞台 上 的 
绘画 。 

另外 ,在 Flash CC 2015 中 ,除了 上 面 所 介绍 
的 新 增 功能 之 外 ,还 包括 一 些 其 他 关键 改进 .例如 . 
重新 启用 对 象 级 撤销 选项 、 导 出 放映 文件 功能 等 。 


5.1.3 ”网 页 动画 形式 


Flash 是 最 常见 的 网 页 元 素 之 一 . 
















































































县 有 适用 范 





;网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 : 





围 广 、 占 用 空间 小 、 支 持 跨 平台 播放 以 及 强大 的 交 
互 性 等 优点 。 正 因为 这 些 优点 ，Flash 不 仅 是 网 页 
动画 的 制作 软件 . 也 是 网 页 多 媒体 的 承载 者 。 网 页 
中 常见 的 动画 形式 如 下 。 

















动画 形式 描 述 

访问 者 进入 网 站 前 播放 的 动画 。 
进入 动画 设计 的 好 坏 直 接 影 响 到 
网 站 给 访问 者 的 第 一 印象 ， 所 以 
越 来 越 多 的 网 站 开始 重视 进入 动 
画 的 设计 

通常 所 见 的 Logo 图 标 为 静态 的 
图 片 ， 其 实 也 可 以 制作 成 动画 。 
但 是 ， 目 前 采用 这 种 形式 Logo 
的 网 站 较 少 

导航 菜单 可 以 引导 访问 者 浏览 网 
站 内 的 信息 。 与 传统 的 导航 条 相 
比 , Flash 导航 菜单 在 表现 效果 上 
更 加 丰富 ， 从 而 给 访问 者 一 种 新 
额 的 感觉 

按钮 在 跳 转 网 页 或 执行 某 些 任务 
(如 提交 表单 ) 时 起 到 了 不 可 替代 
的 作用 。 为 了 能 够 表现 更 强 的 动 
画 效 果 ， 也 可 以 将 按钮 制作 成 
Flash 动画 

Banner 是 最 常见 的 网 络 广告 形式 
之 一 ， 通 常 是 静态 图 像 、GIF 动 
态 图 像 或 Flash 动画 。 其 中 Flash 
动画 的 表现 能 力 最 强 ， 因 此 也 受 
到 大 部 分 网 站 的 青 昧 

在 很 多 网 站 中 都 可 以 看 到 自动 切 
换 的 图 片 展示 Flash, 它 在 指定 的 
区 域内 可 以 循环 展示 多 个 图 片 ， 
正 因为 此 通常 用 于 宣传 广告 图 片 
的 展示 


进入 动画 


Logo 图 标 


导航 菜单 


按钮 


Banner 


图 片 展 示 





透明 Flash 通常 添加 到 网 页 的 静 
态 图 像 上 面 ， 由 于 其 背景 可 以 设 
置 为 透明 ， 所 以 能 够 快速 地 让 静 
态 图 像 具 有 动画 效果 ， 为 网 页 图 
像 起 到 了 很 好 的 点 组 效果 


透明 Flash 





除了 可 以 将 Flash 作为 元 素 融入 
到 网 页 中 ， 还 可 以 将 整个 网 站 制 
作成 Flash。 虽然 在 加 载 过 程 中 需 
要 更 长 的 时 间 ， 但 是 所 表现 的 整 
体 效 果 却 是 传统 网 站 无 法 比拟 的 


Flash 整 站 





5.2 


每 一 个 Flash 动画 文件 都 有 用 于 存放 动画 元 素 
的 【 库 】， 其 中 包括 元 件 、 位 图 、 声 音 以 及 视频 文 
件 等 。 通过 【 库 ] 可 以 方便 地 查看 和 组 织 这 些 内 容 。 


5.2.1 导入 动画 素材 


在 Flash 中 . 除了 可 以 使 用 绘图 工具 创建 各 种 
图 形 和 文本 , 还 可 以 将 其 他 软件 创建 的 矢量 图 形 和 
位 图 图 像 等 素材 导入 到 文档 中 。 

1. 导入 到 舞台 

导入 到 舞台 是 指 将 其 他 软件 中 创建 或 者 编辑 
的 文件 导入 到 当前 场景 舞台 中 。 执行 【文件 ] | [ 导 
入 】| 【导入 到 有 舞台】 命令 ， 在 弹出 的 【导入 】 对 话 
框 中 选择 所 要 导入 的 图 像 ， 单 击 【 打 开 】 按 钮 即 可 。 


管理 库 资源 
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2. 导入 到 库 
除了 可 以 将 素材 导入 到 舞台 之 外 . 还 可 以 将 素材 
导入 到 【 库 】 面 板 中 ， 以 便 用 户 对 其 重复 使 用 和 编辑 。 














执行 【文件 】|【 导 入 】| 【导入 到 库 】 命 令 ， 
在 弹出 的 【导入 到 库 】 对 话 框 中 , 选择 所 要 导入 的 
图 像 文件 单 击 【 打 开 】 按 钮 即 可 。 
3. 打开 外 部 文件 

若 要 使 用 其 他 Flash 源 文件 素材 ,可 以 执行 [ 文 
件 】|【 导 入】| 【打开 外 部 库 】 命 令 . 在 弹出 的 【 打 
开 】 对 话 框 中 选择 源 文件 ， 单 击 【 打 开 】 按 钮 。 









此 时 ,系统 将 单独 打开 该 文件 的 【 库 】 面 板 ， 
以 方便 用 户 对 该 文件 进行 编辑 和 使 用 。 








5.2.2 ”创建 元 件 
每 一 个 Flash 动画 文件 都 有 用 于 存放 动画 元 素 
的 【 库 】 面 板 . 包括 元 件 、 位 图 、 声 音 以 及 视频 等 


文件 。 
在 Flash 中 包含 三 种 类 型 的 元 件 , 即 影片 剪辑 











汪 3 网 页 制 (CC 2015 中 文 版 ) 从 新 手 到 高 手 








元 件 .按钮 元 件 和 图 形 元 件 。 当 创建 一 个 新 元 件 时 
该 元 件 将 会 被 自动 添加 到 【 库 】 中 。 
元 件 类 型 ” 图 标 




















该 元 件 用 于 创建 可 重用 的 动 
画 片 段 ， 拥 有 各 自 独立 于 主 
时 间 轴 的 多 帧 时 间 轴 
该 元 件 用 于 响应 鼠标 单 击 、 
滑 过 或 其 他 动画 的 交互 

该 元 件 可 用 于 创建 链接 到 主 
时 间 轴 的 可 重用 动画 片段 


影片 剪辑 







1. 影片 剪辑 元 件 

影片 剪辑 就 是 通常 所 说 的 MC (Movie Clip) 。 
它 可 以 将 场景 上 任何 看 得 到 的 对 象 , 甚至 整个 【时 
间 轴 】 内 容 创 建 为 一 个 影片 剪辑 , 并 且 可 以 将 这 个 
影片 剪辑 放置 到 另 一 个 影片 剪辑 中 。 

在 【 库 】 面 板 中 , 单 击 下 方 的 【新 建 元 件 】 按 
钮 , 在 弹出 的 【创建 新 元 件 】 对 话 框 中 输入 元 件 名 





称 ， 将 【类 型 】 设 置 为 【影片 剪辑 】. 
定 】 按 钮 。 


并 单 击 【 确 
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此 时 , 系统 将 自动 进入 该 元 件 的 编辑 环境 , 用 
户 可 在 舞台 中 拖 入 其 他 元 件 或 直接 创建 图 形 。 





选择 舞台 中 的 对 象 ， 执行 【修改 〗| 【转换 为 
元 件 】 命 令 ， 在 弹出 的 【转换 为 元 件 】 的 对 
话 框 中 输入 元 件 名 称 ， 设置 为 【 影 
片 剪 辑 】， 也 可 创建 影片 剪辑 元 件 。 






































2. 按钮 元 件 
创建 按钮 元 件 的 对 象 可 以 是 导入 的 位 图 图 像 、 
矢量 图 形 、 文 本 对 象 ， 以 及 用 Flash 工具 创建 的 任 
何 图 形 。 
单 击 【新 建 元 件 】 按 钮 ， 在 弹出 的 【创建 新 元 
件 】 对 话 框 中 ， 将 【类 型 】 设 置 为 【按钮 】 单 击 
【和 确定】 按钮 ， 进 入 编辑 环境 中 创建 即 可 。 
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其 中 ， 


各 个 状态 帧 的 功能 如 下 所 述 。 
口 弹 起 ”表示 指针 没有 经 过 时 的 按钮 状态 。 


口 指针 经 过 ”表示 指针 经 过 时 的 按钮 状态 。 

口 按 下 表示 单 击 时 的 按钮 状态 。 

口 点 击 用 于 定义 响应 鼠标 单 击 的 区 域 。 
3. 图 形 元 件 

创建 图 形 元 件 的 对 象 可 以 是 导入 的 位 图 图 像 、 
矢量 图 形 、 文 本 对 象 ， 以 及 用 Flash 工具 创建 的 任 

















单 击 【 新 建 元 件 】 按 钮 . 在 弹出 的 【创建 新 元 
件 】 对 话 框 中 将 【类 型 】 设 置 为 【图 形 】 并 单 击 
【和 确定】 按钮 。 然 后 .进入 编辑 环境 创建 图 形 元 件 
的 内 容 即 可 。 











在 【 库 】 面 板 中 , 双击 所 要 编辑 的 元 件 名 称 ， 
即 可 进入 该 元 件 的 编辑 环境 ， 此 时 可 以 对 元 
件 内 容 进 行 添加 、 修 改 和 删除 等 操作 。 








中 绘制 矢量 图 形 


在 通过 Flash 制作 网 页 元 素 时 , 除了 可 以 直接 在 绘制 矢量 笔触 后 ， 单 击 【 选 择 工具 】 国 | . 
导入 外 部 的 动画 素材 外 . 还 可 以 通过 绘图 工具 直接 ”将 鼠标 置 于 矢量 直线 笔触 上 方 . 当 光 标 转换 为 带 有 
创建 所 需 的 矢量 图 形 。 弧 线 的 箭头 后 ， 拖 动 鼠 标 ， 即 可 将 绘制 的 直线 笔 


触 转换 为 曲线 笔触 。 
5.3.1 使 用 线条 工具 在 绘制 直线 时 . 用 户 也 可 在 【属性 】 面 板 中 根 





















































【线条 工具 】 国 可 以 用 来 绘制 各 种 角度 的 直 。” 据 需要 设置 线条 的 【笔触 颜色 】 【笔触 】 和 【 样 
线 . 它 没有 辅助 选项 .其 笔触 格式 的 调整 可 以 在 [ 属 ” 式 】 等 。 
pln | 
"| A 线 系 I 具 
ETET 
全 | [本 
BX: @ +-” 
/em 古 陡 舞台 纺 放 大 小 
2 Oo— 
本: 了 
mk: (EE + ~ © 
在 【工具 】 面 板 中 单 击 【线条 工具 】 按 钮 恩 |. 编 k: [级 |] 日 提示 
然后 在 舞台 中 拖 动 鼠标 ， 即 可 绘制 简单 直线 笔触 。 Ws: El 
接 全 : 作物 :30 
和 国 震 1 | 





在 绘制 直线 时 ， 同 时 按 住 Shift 键 ， 可 以 绘 


制 水 平 线 、45” 儿 线 和 竖 直线 ; 同时 按 住 
Alt 键 ， 可 以 绘制 任意 角度 的 直线 。 


5.3.2 ”使 用 铅笔 工具 
【铅笔 工具 ] 国 | 用 来 绘制 简单 的 矢量 图 形 .、 运 

















;网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 : 


网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 


动 路 径 等 。 单 击 【铅笔 工具 】 按 钮 天， 在 和 舞 合 中 
郊 动 鼠标 ， 即 可 绘制 鼠标 轨迹 经 过 的 矢量 笔触 。 


图 埋 : 国 . 筷 中 [om 加 




















在 使 用 【铅笔 工具 】 国 时 ， 单 击 【 选 项 】 区 


域 中 的 【辅助 选项 】 按 钮 ". ， 可 进行 下 列 三 种 类 
型 的 绘图 模式 。 





口 伸 直 选择 该 模式 ， 在 绘制 线条 时 ， 只 要 
匀 勤 出 图 形 的 大 致 轮 廊 ，Flash 会 自动 将 
图 形 转 化 成 接近 的 规则 图 形 。 

口 平滑 ”选择 该 模式 ， 系 统 可 以 平滑 所 绘 曲 
线 ， 达 到 圆 弧 效 果 ， 使 线条 更 加 光滑 。 

口 墨水 选择 该 模式 ， 绘 制图 形 时 系统 完全 
保留 徒手 绘制 的 曲线 模式 ， 不 加 任何 更 
改 ， 使 绘制 的 线条 更 加 接近 于 手写 的 

同样 ， 在 绘制 图 形 时 ， 无 论 选择 哪 一 种 模式 ， 














都 可 以 通过 【属性 】 面 板 来 设置 线条 的 【颜色 】、 
【笔触 】 和 【样式 】 等 选项 。 
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在 【属性 】 面板 中 . 主要 包括 下 列 一 些 重要 选项 。 

口 笔触 颜色 用 于 设置 笔触 的 颜色 ， 单 击 其 
颜色 拾取 器 ， 即 可 在 弹出 的 列表 中 选择 笔 
触 颜色 。 

口 笔触 用 于 定义 笔触 的 高 度 。 

口 样式 ”用 于 设置 笔触 的 样式 ,也 可 单 击 右 
侧 的 【编辑 笔 甬 样式】 按钮， 来 自 定义 笔 
触 样式 。 

口 宽度 用 于 设置 笔触 的 宽度 。 

口 缩放 用 于 定义 播放 Flash 时 笔触 缩放 的 
属性 ， 启 用 【提示 】 复 选 框 ， 可 将 笔触 锚 
点 保存 为 全 像素 以 防止 播放 时 缩放 产生 
的 锯齿 。 

口 端点 用 于 定义 笔触 的 两 个 端点 形状 。 

口 接合 用 于 定义 笔触 的 节点 形状 

口 尖 角 用 于 定义 笔触 的 节点 为 尖 角 ,可 在 
此 设置 尖 角 的 像素 大 小 。 

口 平滑 用 于 定义 笔触 的 平滑 度 ， 该 选项 需 
要 将 【辅助 选项 设置 为 “平滑 ”时 才 变 
为 可 用 。 


5.3.3 ”使 用 椭圆 工具 






使 用 【椭圆 工具 】[ 加 ] 和 【基本 椭 回 工具 】 国 
可 以 绘制 正 圆 和 椭圆 ， 这些 圆 形 可 以 用 来 修饰 图 
像 、 制 作 按钮 、 组 合 图 形 等 。 
1. 椭圆 工具 

单 击 【椭圆 工具 】 按 钮 ， 在 【属性 】 检 查 器 中 
设置 参数 ， 然 后 在 舞台 拖 动 鼠标 绘制 椭圆 形 。 
er 加 . 心 . 中 






































在 【属性 】 面 板 中 的 【椭圆 选项 】 选 项 卡 中 . 
可 以 将 椭圆 转换 为 扇形 、 圆 环 、 扇 环 等 复合 图 形 ， 








其 中 各 选项 的 具体 含义 如 下 所 述 。 
口 开始 角度 ”用 于 定义 扇形 和 扇 环 的 起 始 


角度 。 

口 结束 角度 ”用 于 定义 扇形 和 扇 环 的 结束 
角度 。 

口 内 径 ”用 于 定义 内 径 的 大 小 ， 介 于 0~99 


之 间 的 值 。 
口 闭合 路 径 ”用 于 确定 椭圆 的 路 径 是 否 闭 
合 。 如 果 指 定 了 一 条 开放 路 径 , 但 未 对 生 
成 的 形状 应 用 任何 填充 ， 则 仅 绘制 笔触 。 
默认 情况 下 选择 闭合 路 径 。 
口 重 置 。 单 击 该 按钮 ，Flash 将 清除 以 上 几 
种 属性 ， 将 图 形 转 换 为 普通 椭圆 形 。 
例如 ,使 用 椭圆 工具 绘制 一 个 扇形 。 需 要 在 【 属 
性 】 面 板 中 将 【开始 角度 】 设 置 为 210【 结 束 角度 】 
设置 为 330, 然 后 在 舞台 中 拖 动 鼠 标 即 可 绘制 扇形 。 
1 详 . 避 . 市 




















2. 基本 椭圆 工具 

【基本 椭圆 工具 ] 国 可 以 绘制 出 更 富有 可 编辑 
性 的 矢量 图 形 。 单 击 【 基 本 椭圆 工具 】 按 钮 国 |. 
在 【属性 】 检 查 器 中 设置 基本 椭圆 的 各 种 属性 . 然 
后 在 舞台 中 拖 动 鼠标 即 可 绘制 基本 椭圆 。 
加 证 地 1 
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绘制 基本 椭圆 形 形 状 之 后 . 用 户 还 可 以 在 【 属 
性 】 检 查 器 中 修改 其 属性 。 














在 绘制 椭圆 形 图 形 时 ， 按 住 Shift 键 可 以 绘 
制 正 圆 形 ; 按 住 Alt 键 可 以 以 单 击 点 为 圆心 
绘制 椭圆 ; 同时 按 住 Shift+Alt 组 合 键 则 可 以 
绘制 以 单 击 点 为 中 心 的 正 圆 。 





5.3.4 设置 颜色 工具 


设置 颜色 工具 包括 【渐变 变形 工具 】 国 和 【 颜 
料 桶 工具 】 国 运用 这 些 工具 可 以 设置 形状 的 渐 
变 颜色 和 更 改 现 有 的 形状 颜色 。 

1. 颜料 桶 工具 

【颜料 桶 工具 】 国 | 用 于 填充 或 者 改变 现 有 色 块 
的 颜色 ,选择 该 工具 后 , 在 【工具 】 面 板 选项 中 将 
显示 【空隙 大 小 】 选 项 。 

当 图 形 中 有 缺口 , 没有 形成 闭合 . 可 以 使 用 【 空 
阶 大 小 ] 选项 , 针对 缺口 的 大 小 进行 选择 填充 。 在 【 工 
具 】 面 板 的 选项 区 域 中 . 单 击 【 空 除 大 小 】 按 钮 ， 然 
后 在 下 拉 菜单 中 选择 合适 的 选项 进行 填充 即 可 。 


EECRDO | 
+ 国 坦 : 入 出 
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【空隙 大 小 】 选 项 卡 中 . 各 选项 的 具体 函数 如 
下 所 述 。 
口 不 封闭 空隙 ”定义 扇形 和 扇 环 的 起 始 角度 。 
口 封闭 小 空隙 定义 扇形 和 扇 环 的 结束 角度 。 
口 封闭 中 等 空隙 ”可 以 在 框 中 输入 内 径 的 
数值 ， 或 单 击 滑 块 相应 地 调整 内 径 的 大 
小 。 或 者 直接 可 以 输入 0~99 之 间 的 值 ， 
以 表示 删除 的 填充 的 百分比 。 
口 封闭 大 空隙 ”确定 椭圆 的 路 径 是 否 闭 合 。 
如 果 指定 了 一 条 开放 路 径 , 但 未 对 生成 的 
形状 应 用 任何 填充 ， 则 仅 绘制 笔触。 默认 
情况 下 选择 闭合 路 径 。 
2. 渐变 变形 工具 
【渐变 变形 工具 】 国 是 用 来 调整 填充 的 大 小 、 
方向 、 中 心 以 及 变形 渐变 填充 和 位 图 填充 。 首 先 ， 
在 舞台 中 绘制 一 个 具有 渐变 颜色 的 形状 。 然 后 , 单 
击 【 渐 变 变形 工具 】 按 钮 圈 ， 同 时 单 击 填充 区 域 . 
这 时 图 形 上 会 出 现 两 条 水 平 线 。 如 果 使 用 放射 状 渐 
变 填充 色 对 图 形 进行 填充 , 在 填充 区 域 会 出 现 一 个 
渐变 圆圈 以 及 4 个 圆 形 或 方形 手柄 。 



































使 用 渐变 线 的 方向 手柄 、 距 离 手 柄 和 中 心 手 
柄 , 可 以 移动 渐变 线 的 中 心 、 调 整 渐变 线 的 距离 以 
及 改变 渐变 线 的 倾斜 方向 。 


5.3.5 “使 用 矩形 工具 


使 用 【和 矩形 工具 】 国 和 【基本 算 形 工具 】 国 
可 以 绘制 矩形 和 正方 形 , 绘制 矩形 的 方法 与 绘制 椭 
圆 的 方法 基本 相同 。 
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1. 和 珑 形 工具 

单 击 【矩形 工具 】 按 钮 ,在 【属性 】 检 查 器 中 
设置 图 形 的 【填充 颜色 】 【笔触 颜色 】， 以 及 【 怎 
形 边 角 半 径 】 等 选项 。 然 后 在 舞台 中 将 鼠标 沿 着 要 
绘制 的 矩形 对 角 线 拖 动 ， 即 可 绘制 出 矩形 。 


























2. 基本 德 形 工具 

与 【和 矩形 工具 】 国 相 比 ,【 基 本 矩形 工具 】 辆 
绘制 的 矩形 更 易于 修改 。 单 击 【 基 本 和 矩形 工具 】 按 
钮 国 ， 在 舞台 中 沿 着 要 绘制 的 矩形 对 角 线 拖 动 ， 
即 可 绘制 一 个 矢量 基本 和 矩 形 。 














Hi 记 国 对 条 的 基本 操作 


使 用 绘制 工具 绘制 图 形 对 象 之 后 . 还 需要 对 图 
像 对 象 进行 简单 的 编辑 操作 ， 才 可 以 满足 动画 需 
求 。 例 如 , 图像 对 象 的 选择 、 变 形 、 对 齐 和 排列 等 
编辑 操作 。 


5.4.1 





选择 固定 区 域 


用 户 可 以 使 用 【选择 工具 】 国 | 和 【部 分 选取 
工具 】 国 |. 可 以 选取 或 者 调整 场景 中 的 图 形 对 象 ， 
并 能 够 对 各 种 动画 对 象 进行 选择 、 拖 动 、 改 变 尺寸 
等 操作 。 

1. 使 用 选择 工具 
使 用 【选择 工具 】 国 | 选择 对 象 ， 主 要 包括 下 
列 4 种 操作 方法 。 
口 选取 部 分 区 域 ” 单 击 可 以 选取 某 个 色 块 
或 者 某 条 曲线 。 

口 选取 所 有 区 域 ”双击 可 以 选取 整个 色 块 
以 及 与 其 相连 的 其 他 色 块 和 曲线 等 。 

口 选取 多 个 对 象 ”如 有 果 在 选取 过 程 中 按 住 
Shift 键 ， 则 可 以 同时 选中 多 个 动画 对 象 ， 
也 就 是 选中 多 个 不 同 的 色 块 和 曲线 。 

口 选取 所 有 对 象 ”在 舞台 上 单 击 并 拖 动 区 
域 ， 可 以 选取 区 域 中 的 所 有 对 象 。 

使 用 选择 工具 ， 可 以 对 动画 对 象 完成 的 操作 。 
一 种 是 选择 对 象 后 , 直接 使 用 鼠标 拖 放 到 舞 合 的 其 
他 位 置 即 可 。 


全 | 
1 画 。 二 让 [wm% | 





























而 另外 一 种 是 不 选中 对 象 . 而 是 直接 使 用 鼠标 
拖 放 对 象 ， 此 时 可 以 改变 对 象 的 形状 。 















































2. 使 用 部 分 选取 工具 

此 工具 是 一 个 与 【选择 工具 】 国 | 完全 不 同 的 
选取 工具 . 它 没有 辅助 选项 , 且 具 有 智能 化 的 矢量 
特性 。 在 选择 矢量 图 形 时 . 单 击 对 象 的 轮廓 线 , 即 
可 将 其 选中 ， 并且 会 在 该 对 象 的 四 周 出 现 许多 
节点 。 


























当 需 要 改变 某 条 线条 的 形状 时 , 将 光标 移 到 该 
节点 上 . 当 指针 下 方 出 现 空白 矩形 点 时 . 拖 动 鼠标 


























除 此 之 外 . 用户 还 可 以 调整 节点 两 侧 的 滑 杆 改 
变 线条 的 形状 。 








1 画 . 包 直 [Do 可 

















5.4.2 ”选择 不 规则 区 域 


使 用 套 索 工具 可 以 选取 对 象 的 局 部 或 者 选取 
场景 中 不 规则 的 区 域 。 在 Flash 中 .使 用 套 索 工具 
可 以 创建 不 规则 选择 区 域 . 直 边 选择 区 域 两 种 形状 
的 选择 区 域 。 

1. 不 规则 选择 区 域 

使 用 【 套 索 工具 】 国 | 在 舞台 上 单 击 后 拖 动 鼠 
标 , 轨迹 会 沿 鼠 标 轨迹 形成 一 条 任意 曲线 。 拖 放 鼠 
标 后 , 系统 会 自动 连接 起 始点 , 在 起 始点 之 间 的 区 
域 将 被 选中 ， 该 方法 适合 绘制 不 规则 的 平滑 区 域 。 
Es 


er [| 
































2. 直 边 选择 区 域 

在 工具 栏 的 选项 区 域 中 ， 单 击 【 多 边 形 模式 】 
国 按 钮 。 然 后 在 选择 区 域 的 起 点 位 置 处 单 击 ， 同 
时 拖 动 鼠标 选择 实际 区 域 。 在 结束 选择 的 位 置 中 
双击 即 可 完成 选择 ， 该 方法 适合 绘制 直 边 选择 
区 域 。 




















5.4.3 任意 变形 形状 


【工具 】 面 板 中 的 【任意 变形 工具 】 国 | 与 【 修 
改 】| 【变形 】 命 令 功 能 相同 ,并且 两 者 相通 。 均 
是 用 来 对 图 形 对 象 的 变形 . 例如 缩放 . 旋转 倾斜 、 
扭曲 等 。 

选中 图 形 对 象 后 . 单 击 【 任 意 变 形 工具 】 按 钮 
辆 .这 时 图 形 四 周 将 显示 变形 框 。 在 所 选 内 容 的 周 
围 移动 光标 . 其 光标 会 随 着 变形 位 置 的 改变 而 自动 发 
生变 化 ， 以 用 来 显示 其 具体 位 置 的 具体 变形 功能 。 


天 和 要 Cnws x 















































当选 择 【 任 意 变形 工具 】 国 | 后， 如 果 单 击 该 
面板 底部 的 某 个 功能 按钮 , 即 可 针对 相应 的 变形 功 
能 进行 变形 操作 。 例 如 ， 单 击 面板 底部 的 【扭曲 】 
按钮 ， 则 可 以 对 图 形 对 象 进行 扭曲 变形 。 














使 用 【任意 变形 工具 】 可 以 方便 快捷 地 操作 
对 象 ,但 是 却 不 能 控制 其 精确 度 。 而 利用 【 变 
形 】 面 板 可 以 通过 设置 各 项 参数 ， 可 以 精确 
地 对 其 进行 缩放 对 象 、 旋 转 对 象 、 倾 斜 对 象 
和 翻转 对 象 等 操作 。 





5.5 


文本 是 Flash 动画 中 不 可 缺少 的 重要 组 成 部 
分 。 在 一 些 成 功 的 网 页 上 . 经 常会 看 到 利用 文字 制 
作 的 特效 动画 。 


5.5.1 创建 文本 


在 Flash 中 , 文本 可 以 分 为 静态 文本 和 动态 文 
本 两 种 类 型 ， 以 分 别 适应 不 同 的 动画 制作 需求 。 
1. 创建 静态 文本 

在 【工具 ] 面板 中 , 单 击 【 文 本 工具 】 按钮 国 |. 
然后 , 在 舞台 中 单 击 所 需 插入 文本 的 位 置 , 即 可 创 
建 一 个 矩形 文本 框 ， 在 文本 框 中 输入 文本 即 可 。 














无 村 时 1(Cnwq” x 
EEC 




















输入 文本 后 , 用 户 可 以 在 【属性 】 面 板 中 设置 
文本 的 【字体 ]、 【大 小 】 【样式 】 【颜色 】 和 【 间 
距 】 等 属性 。 


拖 动 鼠标 即 可 创建 动态 文本 框 。 



























































在 Flash 中 创建 文本 之 后 , 还 需要 对 文本 进行 
一 系列 的 编辑 操作 ,以 满足 动画 制作 的 需求 , 达到 
预期 的 制作 效果 。 
1. 选中 文本 
击 【工具 】 面 板 中 的 【选择 工具 】 按 钮 国 ]. 
选择 舞台 中 的 文本 , 此 时 会 在 该 文本 外 出 现 一 个 边 
框 ， 表 明文 本 已 被 选中 。 

















如 果 要 对 一 段 文字 中 的 部 分 文字 进行 编辑 , 那 
么 需要 使 用 【文本 工具 】 国 进行 单 击 或 拖 动 选 中 . 





























2. 创建 动态 文本 

动态 文本 是 可 以 显示 动态 更 新 的 文本 。 单 击 
【文本 工具 】 按 钮 国 ， 在 【属性 】 面 板 的 下 拉 列 表 
中 选择 【动态 文本 】 选 项 。 然 后 , 在 舞台 中 单 击 或 








这 时 可 以 看 到 文本 被 文本 框 包围 , 在 文本 框 中 出 现 
闪 动 的 光标 ， 表 示 可 以 对 文字 进行 编辑 了 。 
2. 将 文本 转换 为 图 形 

在 Flash 中 . 如 果 想 要 让 文字 也 具有 动感 . 且 
像 处 理 图 形 那样 方便 快捷 ， 必 须 将 文本 转换 为 
图 形 。 
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无 标题 4 (Canvas* x 无 每 要 4 (Canvaq” x 

和 二 志 1 十 国志 ! 国力 市 [E+ 
NR 3] 

动 志 因 加 2 A 
+ 动 蓄 要 这 
(四 选择 

wo 
一 3， 为 文本 添加 笔触 





首先 .需要 将 文本 转换 为 图 形 。 然后 , 单 击 【 工 
如 果 是 单个 文字 , 则 需要 选中 该 文字 , 执行 【 修 。 具 】 面 板 中 的 【墨水 瓶 工具 】 按 钮 转 ， 在 【属性 】 


故 | 【分 高 】 命 令 ， 相 将 文字 转换 为 四 形 。 “面板 中 设置 笔触 关 色 、 大 小 和 样式 . 单 击 舞 合 中 的 
| Ei one II | 
CE 文本 即 可 为 其 添加 笔触。 





























如 果 是 两 个 或 者 两 个 以 上 文字 , 则 需要 执行 两 
次 【修改 】|【 分 离 】 命 令 ， 将 段落 文本 分 离 为 单 ”4. 制作 半 透 明 字 








下 如 果 要 设置 文字 的 透明 度 . 则 可 以 在 输入 文本 
后 使 用 【选择 工具 】 国 | 单 击 文本 . 在 【工具 】 面 
板 中 单 击 【填充 颜色 】 色 块 ， 在 弹出 的 色 板 中 设置 

Alpha 选项 即 可 。 























此 时 , 把 光标 放 在 字母 轮廓 的 边缘 上 . 就 可 以 
看 到 在 鼠标 指针 的 右 下角 出 现 一 个 直角 线 . 单 击 并 
拖 动 鼠 标 后 . 字母 的 形状 就 发 生 了 变化 . 说 明文 本 
已 转换 为 图 形 。 


HI? 练习 :制作 古诗 鉴赏 界面 


当 为 序列 应 用 特效 之 前 , 需要 对 序列 进行 谋 套 。 在 本 练习 中 ， 
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将 通过 制作 穿梭 效果 ， 来 详细 介绍 谋 套 序列 ， 以 及 视频 效果 、 音 
频 过 渡 效 果 和 动画 关键 帧 的 使 用 方法 和 操作 技巧 。 










新 建文 档 
导入 素材 
添加 素材 
设置 素材 属性 
输入 文本 
设置 文本 方向 
设置 文本 格式 
新 建 图 层 
重 命名 图 层 














操作 步骤 》》》 

STEPI101 执行 【文件 】 |【 新 建 】 命 令 ， 在 弹出 的 
【新 建文 档 】 对 话 框 中 ,选择 文件 类 型 、 设 置 高 宽 
比 ， 并 单 击 【 确 定 】 按 钮 。 
































STEP|02 执行 [文件 】 | 【导入 】| 【导入 到 库 】 命 ”STEP|04 拖 动 【 库 】 面 板 中 的 文件 到 舞台 中 ， 调 
令 , 在 弹出 的 【导入 到 库 】 对 话 框 中 , 选择 导入 文 ” 整 图 像 文件 使 其 覆盖 整个 舞台 。 同 时 ,双击 【时 间 
件 . 单 击 【 打 开 】 按 钮 。 轴 】 面 板 中 的 图 层 . 重 命 名 为 “背景 。 
STEP|03 执行 【窗口 】|【 库 】 命 令 . 打开 【 库 】 ”STEP|05 在 【时 间 轴 ] 面板 中 . 单 击 【新 建 图 层 】 
面板 。 选 择 导入 图 像 ， 右 击 执行 【属性 】 命 令 。 按钮 ， 新 建 图 层 . 并 将 图 层 命名 为 “诗词 。 
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和 方向 。 用 同样 的 方法 . 在 舞台 中 输入 诗词 的 具体 














IE 会 用 | ia L 中 书 L: 
STEP|06 单 击 【 工 具 箱 】 面 板 中 的 【文本 工具 】 
按钮 ， 在 舞台 中 单 击 , 输入 文本 并 在 【属性 】 面 板 
中 设置 文本 的 字体 格式 。 
Er 








STEP|09 最 后 . 执行 【文件 】| 【另存 为 】 命 令 . 
在 弹出 的 【另存 为 】 对 话 框 中 , 设置 保存 位 置 和 名 
称 ， 单 击 【保存 】 按 钮 即 可 。 


扯 织 ” 。 新建 文件 交 
































必 me" 
STEP|07 单 击 【 属 性 】 面 板 中 的 【改变 文字 方向 】 0 
按钮 .在 展开 的 列表 中 选择 【垂直 】 选 项 . 更 改 文 i 
本 的 显示 方向 。 




















STEP108 使 用 [文本 工具】 在 舞台 中 输入 作者 名 . 
并 在 【属性 】 面 板 中 设置 文本 的 字体 、 大小、 颜色 


-让 居 练习: 制作 邮票 


邮票 效果 是 运用 Flash 中 的 基本 绘制 工具 在 原 素材 图 像 的 基 
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础 之 上 ， 运 用 绘图 工具 与 线条 之 间 的 组 合 来 实现 的 。 在 设计 过 程 
中 ， 由 于 线条 笔触 样式 直接 决定 了 邮票 边缘 锯齿 形状 的 效果 ， 因 
此 其 线条 笔触 样式 的 设置 尤为 重要 。 在 本 练习 中 ， 将 通过 制作 邮 
票 效 果 ， 来 详细 介绍 绘制 工具 的 使 用 ， 以 及 线条 笔触 样式 的 设计 
方法 。 






































设置 笔触 样式 
分 离 对 象 

删除 对 象 

将 线条 转换 为 填充 





操作 步骤 “》》》 面板 中 ， 将 【 宽 】 设 置 为 440， 其 【高 】 参 数 随 比 
STEPI01 执行 【文件 】 | [新 建 】 命 令 ， 在 弹出 的 例 进 行 缩小 。 
[新 建 】 对 话 框 中 .选择 文档 类 型 设置 文档 大 小 ， 
将 背景 色 设置 为 “黑色 ”并 单 击 【 确 定 】 按 钮 。 

























































































STEP|02 执行 【文件 】 | 【导入 】| 【导入 到 舞台 】 [EGRRATARR ] 目 
命令 ， 在 弹出 的 【导入 】 对 话 框 中 选择 导入 文件 ， wy * a 

二 中 

单 击 【 打 开 】 按 钮 。 -一 








STEP|03 执行 【窗口 ] |【 属 性 】 命 令 . 在 【属性 】 
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从 新 





STEP|04 调整 图 片 位 置 ， 单 击 【 工 具 箱 】 面 板 中 
的 【和 矩形 工具 】 按 钮 , 在 【属性 】 面 板 中 . 设置 【 填 
充 颜色 】 为 【无 ] 【笔触 颜色 ] 为 【红色 】( 寿 F0000) 、 
【笔触 】 为 10。 





























Cu 


回 其 拇 台 往 放大 

















STEP105 单 击 【 编 辑 笔触 样式 】 按 钮 ， 在 弹出 的 
【笔触 样式 】 对 话 框 中 ， 将 【类 型 】 设 置 为 【点 状 
线 】 【间距 】 设 置 为 【9 点 】 【粗细 】 设 置 为 【24 
点 】 并 单 击 【 确 定 】 按 钮 。 
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STEP|06 在 舞台 中 拖 动 鼠标 绘制 矩形 其 尺寸 与 
素材 图 片 相同 。 
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STEP|07 单 击 【选择 工具 】 按 钮 , 选择 位 图 对 象 . 
执行 【修改 】| 【分离 】 命 令 . 分离 位 图 。 
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STEP|08 选择 线条 对 象 ， 执行 【修改 】| 【形状 】 
| 【将 线条 转换 为 填充 】 命 令 ， 并 按 Delete 键 , 对 
其 进行 删除 。 


"ED CE 

















STEP|09 最 后 . 使 用 【文字 】 工 具 ， 在 图 片 的 左 
下 角 和 右上 角 分 别 输入 文本 ， 并 设置 文本 的 字体 
格式 。 
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练习 1: 绘制 房地产 网 站 矢量 Logo 
人 〇 downloads\5\ 新 手 训练 营 \ 绘 制 房地产 网 站 矢量 
Logo 
提示 : 本 练习 中 ， 首先 新 建文 档 ， 重 命名 图 层 ， 
使 用 【和 矩形 工具 】 绘 制 背 景 形 状 ， 并 设置 形状 的 渐变 
填充 色 。 然 后 ， 新 建 图 层 ， 使 用 【钢笔 工具 】 绘 制 
Logo 形状 ， 并 设置 其 填充 颜色 。 最 后 ， 新 建 图 层 ， 
使 用 【文本 工具 】 在 舞台 中 输入 文本 并 设置 文本 的 字 
体格 式 。 
































练习 2: 制作 电子 书 封面 
人 〇 downloads\5\ 新 手 训练 营 \ 制 作 电子 书 封面 
提示 : 本 练习 中 ,首先 新 建文 档 ， 导 入 PSD 素 
材 , 重 命名 图 层 。 然 后 , 新建 图 层 , 使 用 【文本 工具 】 
输入 书 名 文本 ， 并 设置 文本 格式 . 府 入 字体 样式 。 最 
后 ,使 用 同样 的 方法 输入 说 明文 本 即 可 。 
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练习 3: 制作 动画 导航 条 

人 downloads\5\ 新 手 训练 营 \ 制 作 动画 导航 条 

提示 : 本 练习 中 , 首先 打开 素材 文件 ,使 用 【 
本 和 拢 形 工具 】 绘 制 矩形 形状 ， 并 设置 其 渐变 填充 色 。 
然后 ,新 建文 本 图 层 ,使 用 【文本 工具 】 输 入 文本 并 
设置 其 属性 。 同 时 ,新 建 图 层 ， 新建 一 个 按钮 元 件 ， 
绘制 半 透 明 的 圆 形 矩形 ,并 设置 其 属性 。 最 后 ,新建 
【 按 下 】 帧 ， 复 制 动 画 帧 ， 并 修改 器 属性 。 同 时 ， 退 
出 元 件 编辑 窗口 ， 复 制 按钮 元 件 即 可 。 
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练习 4: 制作 立体 花纹 字母 

人 〇 downloads\5\ 新 手 训 练 营 \ 制 作 立 体 花纹 字母 

提示 : 本 练习 中 ,首先 新 建文 档 , 使 用 【文本 工 
具 】 输 入 文本 .设置 文本 属性 并 调整 其 位 置 和 角度 。 
然后 ,绘制 花纹 背景 ， 并 设置 其 属性 。 同 时 ,绘制 多 
个 矩形 形状 ， 设 置 其 大 小 、 填 充 颜色 和 位 置 。 最 后 . 
创建 庶 军 图 层 , 设置 庶 雷 效果 。 同 时 ， 创 建文 本 图 层 
输入 字母 ， 并 设置 其 属性 。 
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创建 遮 淖 图 


练习 5: 制作 网 站 进入 动画 
人 〇 downloads\5\ 新 手 训练 营 \ 制 作 网 站 进入 动画 
提示 : 本 练习 中 . 首先 新 建文 档 . 绘制 一 个 矩形 
并 设置 其 渐变 填充 色 。 创 建 圆 形 和 园 形 动画 影片 前 
辑 ， 并 为 其 添加 发 光 滤 镜 。 然 后 ,返回 

















图 层 . 将 影片 剪辑 添加 到 舞台 中 .并 设置 其 变形 大 
小 和 属性 。 
变形 大 小 和 























间 动 画 和 关键 帧 。 最 后 ， 














层 . 设置 庶 淖 效果 。 并 





f 依 次 创建 新 的 图 层 . 





导入 相应 的 输出 , 插入 关键 帧 并 设置 其 色彩 效果 和 补 
间 动 画 。 


























练习 6: 设置 占 位 符 的 渐变 填充 效果 
人 包 downloads\5\ 新 手 训练 营 \ 渐 变 填充 
提示 : 本 练习 中 . 首先 新 建文 档 . 创建 影片 剪辑 
元 件 . 绘制 直线 。 插 入 关键 帧 . 拉 长 直线 并 创建 补 间 
形状 动画 。 然后 . 复制 剪辑 元 件 , 并 调整 其 填充 颜色 ， 
形成 红 黄 绿 三 个 不 同 颜色 的 元 件 。 返 回 到 场景 中 , 将 
三 个 剪辑 元 件 添加 到 和 舞 合 .旋转 元 件 ， 对 其 变形 并 创 
建 补 间 形 状 动画 。 最 后 .新建 三 角形 变形 图 层 . 添加 
元 件 . 插入 关键 帧 并 设置 其 补 间 动 画 。 同 时 ,新 建 标 
志 图 层 . 插入 关键 帧 ， 添 加 元 件 并 创建 补 间 动 画 。 
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在 网 页 媒体 元 素 中 ，Flash 以 其 卓越 的 视觉 表现 和 互动 功能 而 被 众多 网 站 所 采用 ， 包 括 各 种 网 站 的 
进入 动画 、 导 航 条 、 图 像 轮换 动画 、 按 钮 动画 等 都 可 以 使 用 Flash 制作 。 除 了 功能 强大 且 易 于 创建 的 传 
统 补 间 动 画 之 外 ，Flash 还 内 置 了 其 他 类 型 的 多 种 动画 ,例如 引导 动画 、 遮 重 动 画 、 逐 帧 动画 等 。 除 此 
之 外 ， 用 户 还 可 以 通过 Flash 中 的 滤 镜 和 色彩 效果 .来 增强 动画 的 视觉 效果 。 在 本 章 中 ， 将 以 滤 镜 和 补 
间 动 画 为 基础 ， 详 细 介绍 Flash 中 的 各 种 动画 类 型 和 滤 镜 的 使 用 方法 和 基础 知识 。 
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Flash 滤 镜 和 色彩 


: 网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 : 








滤 镜 是 Flash 动画 中 一 个 重要 的 组 成 部 分 . 用 
于 为 动画 添加 简单 的 特效 .如 投影 、 模 糊 、 发 光 、 
和 斜 角 等 . 使 动画 表现 得 更 加 丰富 、 真 实 。 而 色彩 效 
果 是 动画 中 较 常用 的 一 种 特效 方式 ，Flash 允许 用 
户 为 按钮 、 图 形 以 及 影片 剪辑 三 种 元 件 应 用 色彩 
效果 。 


6:1.1 





滤 镜 


Flash 的 滤 镜 与 Photoshop 的 滤 镜 有 本 质 的 不 
同 。 在 Photoshop 中 ， 渡 镜 的 作用 对 象 是 图 层 , 一 
切 滤 镜 特效 都 是 围绕 着 图 层 实现 的 ,而 在 Flash 中 . 
滤 镜 的 作用 对 象 只 能 是 文本 . 按钮 元 件 和 影片 剪辑 
元 件 三 种 元 素 。 在 Flash 中 ,包含 投影 、 模 糊 、 发 
光 、 和 斜 角 等 7 种 滤 镜 。 
1. 投影 滤 镜 

投影 滤 镜 可 模拟 对 象 投影 到 一 个 表面 的 效果 
使 对 象 更 加 有 立体 感 。 

在 舞台 中 选择 一 个 对 象 . 在 【属性 】 面 板 中 的 
【 滤 镜 】 选 项 卡 中 ， 单 击 【 添 加 滤 镜 】 按 钮 ， 在 展 
开 的 列表 中 选择 【投影 】 选 项 即 可 。 



























































添加 投影 滤 镜 之 后 . 系统 会 自动 在 【属性 】 选 
项 卡 中 , 显示 滤 镜 的 设置 参数 , 用 户 可 通过 参数 设 
置 来 更 改 滤 镜 的 显示 效果 。 

其 中 .【 属 性 】 选 项 卡 中 各 滤 镜 参数 的 具体 含 
义 ， 如 下 所 述 。 

口 模糊 X、Y 





该 选项 用 于 控制 投影 的 宽度 





和 高 度 。 
口 强度 该 选项 用 于 设置 阴影 的 明暗 度 ， 数 
值 越 大 ， 阴 影 就 越 暗 。 





中 








计时 
更 < 
硬 口 口 口 





-一 
该 选项 用 于 控制 投影 的 质量 级 别 ， 


口 品质 
设置 为 【高 】 则 近似 于 高 斯 模糊 ; 设置 为 
【 低 】〗 可 以 实现 最 佳 的 回放 性 能 。 

口 颜色 单 击 此 处 的 色 块 ， 可 以 打开 【颜色 
拾取 器 〗， 设 置 阴影 的 颜色 。 


口 角度 ”该 选项 用 于 控制 阴影 的 角度 ， 在 其 
中 输入 一 个 值 或 单 击 角度 选取 器 并 拖 动 
角度 盘 。 

口 距离 ”该 选项 用 于 控制 阴影 与 对 象 之 间 
的 距离 。 

口 挖 空 选择 此 复 选 框 ， 可 以 从 视觉 上 隐藏 
源 对 象 ， 并 在 挖 空 图 像 上 只 显示 投影 。 

口 内 侧 阴 影 启用 此 复 选 框 ， 可 以 在 对 象 边 
界 内 应 用 阴影 。 

口 隐藏 对 象 ”启用 此 复 选 框 ， 可 以 隐藏 对 象 
并 只 显示 其 阴影 ， 从 而 可 以 更 轻松 地 创建 
逼真 的 阴影 。 

2. 模糊 滤 镜 
模糊 滤 镜 可 以 柔 化 对 象 的 边缘 和 细节 , 消除 对 


象 图 像 的 锯齿 。 为 对 象 应 用 模糊 滤 镜 可 为 对 象 制作 
毛 玻璃 效果 或 运动 效果 。 

在 舞台 中 选择 一 个 对 象 . 在 【属性 】 面 板 中 的 
【 滤 镜 】 选 项 卡 中 ， 单 击 【添加 滤 镜 】 按 钮 ,在 展 
开 的 列表 中 选择 【模糊 】 选 项 即 可 。 


天 要 1 x 
+ Snel 
























































模糊 滤 镜 的 选项 只 有 三 种 ， 包 括 【 模 糊 X】、 
【模糊 Y】 以 及 【品质 】 等 ， 其 作用 与 投影 滤 镜 中 
的 同名 选项 相同 。 

3. 发 光 滤 镜 

发 光 滤 镜 的 作用 是 为 对 象 应 用 颜色 . 模拟 光 晕 
效果 。 

在 舞台 中 选择 一 个 对 象 , 在 【属性 】 面 板 中 的 
【 滤 镜 】 选 项 卡 中 ， 单 击 【添加 滤 镜 】 按 钮 ， 在 展 
开 的 列表 中 选择 【发 光 】 选 项 即 可 。 




















发 光 滤 镜 包括 【模糊 X] 【模糊 Y】 【强度 】、 
【品质 ] 【颜色 】 【 挖 空 】 以 及 【内 发 光 】7 种 选 
项 。 其 默认 发 光 颜 色 为 红色 ,而 启用 【内 发 光 】 复 
选 框 ， 可 将 外 发 光 效果 更 改 为 内 发 光 效果 。 

4. 渐变 发 光 滤 镜 

渐变 发 光 滤 镜 是 发 光 滤 镜 的 扩展 . 它 可 以 将 渐 
变色 作为 发 光 的 颜色 ,实现 多 彩 的 光 坚 。 

在 舞台 中 选择 一 个 对 象 . 在 【属性 】 面 板 中 的 
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【 滤 镜 】 选 项 卡 中 . 单 击 【 添 加 滤 镜 】 按 钮 ， 在 展 
开 的 列表 中 选择 【渐变 发 光 】 选 项 即 可 。 

渐变 发 光 滤 镜 的 选项 比 发 光 滤 镜 多 了 两 个 , 包 
括 【 类 型 】 和 【渐变 】。【 类 型 】 选 项 可 设置 渐变 发 
光 的 位 置 , 而 【渐变 】 选 项 则 用 于 设置 渐变 发 光 的 
颜色 。 











5. 斜 角 滤 镜 

斜 角 滤 镜 可 以 向 对 象 应 用 局 部 加 亮 效果 . 使 其 
看 起 来 凸 出 于 背景 表面 。 在 Flash 中 ， 此 滤 镜 功能 
多 用 于 按钮 元 件 。 

在 舞台 中 选择 一 个 对 象 , 在 【属性 】 面 板 中 的 
【 滤 镜 】 选 项 卡 中 ， 单 击 【 添 加 滤 镜 】 按 钮 ， 在 展 
开 的 列表 中 选择 【和 斜 角 】 选 项 即 可 。 











斜 角 滤 镜 的 选项 大 部 分 与 投影 滤 镜 重复 , 然而 
有 些 选项 属于 斜 角 滤 镜 独 有 ， 其 具体 情况 如 下 所 
述 。 
口 加 亮 显示 。 单 击 右 侧 的 色 块 ， 即 可 打开 大 
色 拾 取 器 ， 选 择 为 针 角 加 亮 的 颜色 。 
口 类 型 设置 针 角 小 镜 出 现 的 位 置 ， 包 括 内 
便 、 外 侧 和 全 部 三 种 。 
6. 渐变 斜 角 滤 镜 
应 用 渐变 斜 角 渡 镜 ， 可 以 使 元 件 产生 凸 起 效 








网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 





果 . 使 得 对 象 看 起 来 好 像 从 背景 上 凸 起 . 且 斜 角 表 
面 也 可 以 设置 渐变 色 。 渐变 斜 角 要 求 渐变 色 中 间 一 
种 颜色 的 Alpha 值 为 0。 

在 舞台 中 选择 一 个 对 象 , 在 【属性 】 面 板 中 的 
【 滤 镜 】 选 项 卡 中 ， 单 击 【 添 加 滤 镜 】 按 钮 ,在 展 
开 的 列表 中 选择 【渐变 斜 角 】 选 项 即 可 。 

















渐变 斜 角 滤 镜 中 的 参数 , 只 是 将 斜 角 滤 镜 中 的 
【阴影 】 和 【加 亮 显示 】 颜 色 控件 ， 蔡 换 为 【渐变 】 
控件 。 所 以 渐变 斜 角 立 体 效 果 , 是 通过 渐变 颜色 来 
实现 的 。 

7. 调整 颜色 滤 镜 

调整 颜色 滤 镜 的 作用 是 设置 对 象 的 各 种 色彩 
属性 , 在 不 破坏 对 象 本 身 填 充 色 的 情况 下 , 转换 对 
象 的 颜色 ， 以 适应 动画 的 要 求 。 

在 舞台 中 选择 一 个 对 象 , 在 【属性 】 面 板 中 的 
【 滤 镜 】 选 项 卡 中 ， 单 击 【添加 滤 镜 】 按 钮 ， 在 展 
开 的 列表 中 选择 【调整 颜色 】 选 项 即 可 。 











其 中 , 在 【属性 】 选 项 卡 中 , 包含 以 下 4 种 颜 
色调 整 选项 。 

口 亮度 ”调整 对 象 的 明亮 程度 ， 其 值 范围 为 

是 -100~100， 黑 认 值 为 0。 当 亮度 为 -100 

时 ,对 象 被 显示 为 全 黑色 ;而 当 亮度 为 100 
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时 ， 对 象 被 显示 为 白色 。 

口 对 比 度 ”调整 对 象 颜色 中 黑 到 白 的 渐变 
层次 ， 其 值 范围 为 -100~100， 默 认 值 为 0。 
对 比 度 越 大 ， 则 从 黑 到 白 的 渐变 层次 就 越 
多 ， 色 彩 越 丰 富 。 反 之 ， 则 会 使 对 象 给 人 
一 种 灰 蒙 蒙 的 感觉 。 

口 饱和 度 ”调整 对 象 颜色 的 纯度 ， 其 值 范围 
为 -100~100， 默 认 值 为 0。 饱 和 度 越 大 ， 
则 色彩 越 丰 富 ， 如 饱和 度 为 -100， 则 图 像 
将 转换 为 灰 度 图 。 

口 色相 色彩 的 相貌 ， 用 于 调整 色彩 的 光 
谱 ， 使 对 象 产 生 不 同 的 色彩 ， 其 值 范围 为 
-180~180， 默 认 值 为 0。 例 如 ， 原 对 象 为 
红色 ， 将 对 象 的 色相 增加 60,， 即 可 转换 为 
黄色 。 


6.1.2 色彩 效果 


色彩 效果 是 动画 中 较 常 用 的 一 种 特效 方式 。 
Flash 允许 用 户 为 按钮 、 图 形 以 及 影片 剪辑 三 种 元 
件 应 用 色彩 效果 。Flash 的 色彩 效果 主要 可 分 为 4 
种 ， 即 亮度 、 色 调 、 高 级 和 Alpha 等 。 

1. 亮度 

亮度 主要 用 于 调节 元 件 的 相对 亮度 和 上 暗 度 ,其 
度量 范围 从 黑 到 白 ， 取 值 范围 为 -100%~100%， 默 
认 值 为 0。 

在 舞台 中 选择 一 个 对 象 . 在 【属性 】 面 板 中 的 
【色彩 效果 】 选 项 卡 中 ， 单 击 【 样 式 】 下 拉 按 钮 ， 
在 其 下 拉 列 表 中 选择 【亮度 】 选 项 . 调整 相应 参数 
即 可 。 


















































2. 色调 
色调 的 作用 是 根据 用 户 选 定 的 颜色 .为 元 件 
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着 色 。 和 透明 度 的 值 。 

在 舞台 中 选择 一 个 对 象 . 在 【属性 】 面 板 中 的 在 舞台 中 选择 一 个 对 象 . 在 【属性 】 面 板 中 的 
【色彩 效果 】 选 项 卡 中 . 单 击 【 样 式 】 下 拉 按 钮 。 【色彩 效果 】 选 项 卡 中 ， 单 击 【 样 式 】 下 拉 按 钮 
在 其 下 拉 列 表 中 选择 【色调 】 选 项 . 设置 色调 颜色 。” 在 其 下 拉 列 表 中 选择 【高 级 】 选 项 . 设置 相应 参数 
和 相应 参数 即 可 。 即 可 。 


















































色调 参数 的 具体 含义 ， 如 下 所 述 。 




















口 色调 “着 色 的 颜色 饱和 度 / 选 明度 , 取 值 范 “4 Alpha 
围 为 0~100%。 当 色调 为 0 时 ， 着 色 完 全 该 选项 用 于 设置 元 件 的 透明 度 , 其 取 值 范围 介 
透明 ; 而 当 色调 为 100% 时 ， 着 色 完全 不 ”于 0~100%， 默认 值 为 100%。 
透明 。 在 舞台 中 选择 一 个 对 象 , 在 【属性 】 面 板 中 的 
口 红 着 色 的 颜色 中 红色 的 值 ， 取 值 范围 为 【色彩 效果 】 选 项 卡 中 ， 单 击 【 样 式 】 下 拉 按 钮 ， 
0~255。 在 其 下 拉 列 表 中 选择 Alpha 选项 ， 设 置 相 应 参数 
口 绿 着 色 的 颜色 中 绿色 的 值 ， 取 值 范围 为 ” 即 可 。 
0-255。 
口 蓝 着 色 的 颜色 中 红色 的 值 ， 取 值 范围 为 。 让 世 SEE 
0-255。 





单 击 【 样 式 】 选 项 右 侧 的 【着 色 】 方 框 ， 可 
在 展开 的 色 板 中 选择 色调 颜色 。 




















3. 高 级 
该 色彩 效果 用 来 分 别 调整 元 件 中 的 红 . 绿 、 蓝 


62| 传统 动画 设计 


传统 动画 设计 除了 传统 补 间 动 画 、 补 间 形 状 动 Tn 

田 

画 之 外 ， 还 包括 运动 引导 动画 . 和 和 动画 和 运 帆 动 ”6.2.1 ” 补 间 形 状 动画 
画 等 动画 方式 ， 以 协助 用 户 为 网 页 设计 简单 的 补 间 形 状 动画 的 作用 是 对 矢量 图 形 的 各 关键 
Flash 动画 。 节点 的 位 置 进行 操作 而 制作 成 的 动画 。 在 补 间 形状 
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动画 中 ,用 户 需 要 提供 补 间 的 初始 形状 和 结束 形 
状 ， 从 而 为 Flash 的 补 间 提 供 依据 。 

在 创建 补 间 形 状 动画 过 程 中 . 首先 选择 图 层 的 
第 1 帧 作为 关键 帧 ， 输 入 文本 并 将 其 转换 为 形状 。 


[| ne = OOOO! 


和 
补 间 动 各 
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然后 ， 在 图 层 的 第 30 帧 处 ， 右 击 执行 【插入 
空白 关键 帧 】 命 令 , 插入 空白 关键 帧 , 输入 文本 并 
将 其 转换 为 形状 。 
aa 


ECD 
转 扩 为 还 秆 引 男 




















输入 文本 之 后 , 选择 文本 , 执行 两 次 【修改 】 
| 【分 离 】 命 令 ， 即 可 将 文本 转换 为 形状 。 





最 后 ， 右 击 两 个 关键 帧 之 间 的 任意 一 个 普 
帧 , 执行 【创建 补 间 形状 】 命 令 , 即 可 制作 补 间 形 
状 动画 。 





补 交 动画 
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由 于 Flash 只 能 为 矢量 图 形制 作 补 间 形 状 动 


画 ， 因 此 需要 先 将 输入 的 文本 进行 分 离 ， 将 
其 转换 为 形状 。 


6.2.2 ”传统 补 间 动画 


传统 补 间 动画 的 作用 是 根据 用 户 提供 的 一 个 
元 件 在 两 个 关键 帧 中 的 位 置 差异 . 来 生成 该 元 件 移 
动 的 动画 。 在 传统 补 间 动 画 中 , 用 户 需要 提供 元 件 
的 初始 位 置 和 结束 位 置 ， 以 为 Flash 创造 补 间 动 画 
的 依据 。 

首先 . 选择 图 层 中 的 第 1 帧 作为 关键 帧 , 执行 
【文件 】 |【 导 入 】 命 令 ， 导 入 图 像 作为 素材 。 























然后 ,在 图 层 的 第 30 帧 处 ， 右 击 执行 【插入 
关键 帧 】 命 令 ， 插 入 关键 帧 。 





他 形状 
eh 


:Ga 





[TI 








最 后 ， 右 击 两 个 关键 帧 之 间 的 任意 一 个 普通 
帧 , 执行 【创建 传统 补 间 】 命 令 . 在 第 2 个 关键 帧 
位 置 处 拖 动 舞台 中 的 对 象 ， 即 可 制作 传统 补 间 
动画 。 
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Flash 只 允许 用 户 将 元 件 作为 传统 补 间 动 画 
的 基本 单位 ， 因 此 当 用 户 导 入 素材 图 像 之 
后 ， 系 统 会 自动 将 素材 图 像 转 换 为 元 件 。 


6.2.3 ”运动 引导 动画 

运动 引导 动画 是 传统 补 间 动 画 的 一 种 延伸 . 用 
户 可 以 在 舞台 中 绘制 一 条 辅助 线 作为 运动 路 径 , 以 
使 指定 的 对 象 可 以 沿 着 该 运动 路 径 运 动 。 

创建 运动 引导 动画 至 少 需要 两 个 图 层 , 一 个 图 
层 为 普通 图 层 , 用 于 存放 运动 的 对 象 ; 另外 一 个 图 
层 为 运动 引导 图 层 , 用 于 绘制 作为 对 象 运动 路 径 的 
辅助 线 。 

首先 ， 为 舞台 添加 背景 图 像 。 然 后 新 建 图 层 ， 
导入 运动 素材 图 像 ， 并 转换 为 影片 剪辑 。 同 时 ,在 
第 40 帧 处 ， 右 击 执行 【插入 帧 〗】 命 令 ， 插入 普 
通 帧 。 
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右 击 “ 荷 花 ”图 层 . 执行 【添加 传统 运动 引导 
层 】 命 令 ， 为 该 图 层 添加 一 个 传统 运动 引导 图 层 。 
然后 . 使 用 【铅笔 工具 】 在 舞台 中 绘制 “荷花 ”的 



































选择 “荷花 ”影片 剪辑 ,将 其 拖 到 线条 的 左 侧 
端点 ,作为 运动 引导 动画 的 起 始 位 置 。 然 后 , 在 该 
图 层 的 最 后 一 帧 处 插入 关键 帧 , 将 “荷花 ”影片 剪 
辑 拖 到 线条 的 右 侧 端 点 . 作为 运动 引导 动画 的 结束 
位 置 。 


无 标题 4(Canwes)” x 


























最 后 . 在 这 两 个 关键 帧 之 间 的 任意 一 个 普通 帧 
上 , 右 击 执行 【创建 传统 补 间 】 命 令 ， 创 建 传 统 补 
间 动 画 。 








+ MOULD 














最 后 .执行 【控制 】|【 播 放 】 命 令 ， 即 可 预 








览 动画 效果 , 可 以 看 到 “荷花 ” 沿 着 绘制 的 运动 路 


径 进 行 运动 。 





遮 草 动画 是 一 种 特殊 的 Flash 动画 类 型 。 用 户 








在 制作 遮 章 动 画 时 , 需要 在 动画 图 层 上 创建 一 个 遮 























章 层 ; 然后 在 遮 章 层 中 绘制 各 种 矢量 图 形 . 并 将 其 
设置 为 分 离 状态 。 当 播放 动画 时 . 只 有 被 遮 罩 层 庶 
住 的 内 容 才 会 显示 , 而 其 他 部 分 将 被 隐藏 起 来 . 通 
常用 于 制作 图 像 之 间 的 过 渡 效 果 。 




















然后 . 


舞台 中 ， 并且 两 张 图 像 的 尺寸 与 舞台 大 小 相 








新 建 “图 层 2 . 
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网 页 制作 与 网 站 组 建 【CC 2015 中 文 版 】 从 新 手 到 高 手 








将 另 一 张 素材 图 像 导 入 到 














可 











新 建 图 层 3. 在 舞台 的 中 间 绘 制 一 个 任意 颜色 
的 圆 形 . 该 圆 形 作为 遮 草 














层 中 的 庶 晶 物 。 





EE CEE 














在 第 40 帧 处 
具 】 放 大 圆 形 的 尺 
































插入 关键 帧 ， 使 用 【任意 变形 工 
寸 , 使 其 可 以 覆盖 整个 舞台 。 同 





时 ,在 图 层 1 和 图 层 2 的 第 40 帧 处 插入 普通 帧 。 






































在 Flash 中 新 建 空白 文档 ， 导 入 图 像素 材 到 和 舞 





本 让 幸 [o 可 
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右 击 第 1 帧 和 第 40 帧 之 间 的 任意 一 帧 ， 在 弹 
Ph 执行 【创建 补 间 形 状 】 命 令 , 创建 补 间 





出 的 菜单 








形状 动画 。 
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右 击 图 层 3. 在 弹出 的 菜单 中 执行 【 余 重 层 】 
命令 ， 将 其 转换 为 诞 音 图 层 。 









































6.2.5” 逐 帧 动画 


逐 帧 动画 是 除 补 间 动画 外 的 另 一 大 类 动画 .是 
在 时 间 轴 中 逐 帧 绘制 的 动画 。 

由 于 逐 帧 动画 是 一 帧 一 帧 绘制 的 ， 因 此 其 在 表 
现形 式 上 有 非常 大 的 灵活 性 ， 可 以 体现 出 任何 内 容 。 

在 逐 帧 动画 中 . 每 一 帧 都 是 关键 帧 , 且 每 一 帧 
都 需要 用 户 手工 绘制 ， 其 制作 的 困难 度 最 高 。 

因此 , 多 数 用 户 在 制作 逐 帧 动画 时 . 都 会 在 已 
绘制 的 关键 帧 后 复制 一 个 内 容 完全 相同 的 关键 帧 ， 
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然后 再 根据 动画 的 变化 . 对 其 进行 修改 . 尽量 利用 
已 绘制 的 部 分 。 





例如 . 绘制 上 图 中 的 人 物 . 应 先 将 素材 导入 到 
舞台 中 。 然 后 . 在“ 人物” 图 层 的 第 2 帧 处 插入 关 
键 帧 , 并 修改 胎 膊 的 角度 和 位 置 .使 用 相同 的 方法 ， 
分 别 在 第 3 帧 和 第 4 帧 处 插入 关键 帧 , 并 修改 胸 膊 
的 角度 和 位 置 ， 即 可 完成 绘制 逐 帧 动画 。 























逐 帧 动画 在 每 一 帧 都 会 更 改 熏 台中 的 内 容 ， 
它 最 适合 于 图 像 在 每 一 帧 中 都 在 变化 ， 而 不 
是 在 舞台 上 移动 的 复杂 动画 。 





也 蜀 补 间 动 画 设计 





Flash 支持 两 种 不 同类 型 的 补 间 以 创建 动画 
除了 传统 的 补 间 动 画 之 外 , 还 包括 补 间 动 画 . 其 功 
能 强大 且 易 于 创建 . 可 对 补 间 动 画 进 行 最 大 程度 的 
控制 ， 包括 2D 旋转 、3DZ 位 置 、3DX 旋转 等 。 


6.3.1 补 间 动 作 动画 


在 Flash 中 . 用 户 可 以 用 简便 的 方式 创建 和 编 
辑 丰 富 的 动画 。 同 时 , 还 可 以 以 可 视 化 的 方式 来 编 
辑 动画 。 

补 间 动 画 以 元 件 对 象 为 核心 , 一 切 补 间 的 动作 
都 是 基于 元 件 的 。 因此. 在 创建 补 间 动 画 之 前 . 还 
需要 先 在 舞台 中 创建 元 件 . 来 作为 起 始 关键 帧 中 的 
内 容 。 
































例如 ， 导 入 背景 素材 图 像 。 然 后 ， 新 建 图 层 , 
将 素材 图 像 导入 到 舞台 中 , 并 将 其 转换 为 影片 剪辑 
元 件 。 同 时 ， 在 两 个 图 层 中 的 第 20 帧 处 分 别 插入 
一 个 普通 帧 。 


















































网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 

















右 击 第 1 帧 . 执行 【创建 补 间 动 画 】 命 令 。 此 
村, Flash 将 包含 补 间 对 象 的 图 像 转换 为 补 间 图 层 . 
并 在 该 图 层 中 创建 补 间 范围 。 























用 








上 f 补 间 范 围 内 的 最 后 一 帧 , 执行 【插入 关键 








帧 】| 【位置 】 命 令 ， 在 补 间 范 围 内 插入 一 个 菱形 
的 属性 关键 帧 。 然 后 , 将 对 象 拖 至 舞台 的 右 侧 . 此 























村 系统 将 显示 补 间 动 画 的 运动 路 径 。 


maprn 中 





























户 也 可 以 在 单个 帧 中 定义 多 个 属性 . 而 每 个 
属性 都 会 驻 留 在 该 帧 中 。 其 中 . 属性 关键 帧 除了 位 











置 属性 之 外 ， 还 包含 下 列 6 种 属性 。 


口 
口 


口 
口 
口 


扬 
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位 置 
缩放 
倾斜 
旋转 
颜色 


对 象 的 收 坐 标 或 了 坐标 。 

对 象 的 宽度 或 高 度 。 
倾斜 对 象 的 革 轴 或 了 轴 。 

以 下 了 和 Z 轴 为 中 心 旋转 。 

磊 色 效果 ， 包 括 亮 度 、 色 调 、Alpha 


透明 度 和 高 级 颜色 设置 等 。 


滤 镜 ”所 有 滤 镜 属性 ， 包 括 阴影 、 发 光 、 
针 角 等 。 
全 部 应 用 以 上 所 有 属性 。 


6.3.2 动画 编辑 器 
在 【时 间 轴 】 面 板 中 ， 双 和 








包含 补 间 动 画 效果 


的 时 间 轴 中 的 任意 位 置 , 即 可 打开 【动画 编辑 器 】 
面板 。 通 过 该 面板 , 不 仅 可 以 在 优化 移动 补 间 动 画 
时 提供 更 顺畅 的 使 用 体验 , 而 且 还 可 以 有 助 于 用 户 
更 轻松 、 集中 编辑 属性 曲线 , 从 而 使 设计 者 可 以 用 
简单 的 步骤 来 创建 复杂 且 吸 引 人 的 补 间 动 画 . 以 便 


于 模拟 物件 的 真实 运动 轨迹 。 
1. 添加 锚 点 
在 【动画 编辑 器 】 面 板 中 


的 【位 置 】 列 表 中 ， 





选择 所 需 添加 锚 点 的 位 置 。 然 后 , 单 击 【 在 图 形 上 
添加 锚 点 】 按 钮 . 移动 鼠标 到 曲线 上 , 当 鼠 标 变 成 
“钢笔 ”形状 时 ， 单 击 即 可 添加 锚 点 。 























程度 。 









































则 白 计 DPhil OU | 





2. 适应 视图 大 小 





在 【动画 编辑 器 】 面 板 中 单 击 【适应 视图 大 小 】 
按钮 . 即 可 调整 编辑 器 的 视图 方式 , 使 其 以 当前 视 
图 大 小 的 宽度 进行 显示 。 再 次 单 击 【 适 应 视图 大 小 】 
按钮 ， 即 可 将 其 调整 为 窄 屏 显示 状态 。 
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按钮 . 在 其 下 拉 列 表 中 选择 相应 的 缩放 比例 . 即 可 
垂直 缩放 面板 视图 。 








3. 添加 缓冲 设置 垂直 缩放 效果 之 后 , 可 以 通过 单 击 【 缩 放 
在 【动画 编辑 器 】 面 板 中 的 【位 置 】 列 表 中 ， ”100%】 按 钮 ， 取 消 垂直 缩放 效果 ， 将 视图 比例 调 

选择 所 需 添 加 锚 点 的 位 置 。 然 后 . 单 击 【 为 选 定 属 。” 整 为 原始 状态 。 

性 适用 缓冲 】 按 钮 , 在 弹出 的 面板 中 选择 缓冲 类 型 

即 可 。 








5. 移 除 属性 
在 【动画 编辑 器 】 面 板 中 , 单 击 【 为 选 定 属性 
删除 补 间 ] 按 钮 , 即 可 删除 当前 图 层 中 的 补 间 动 画 。 


单 击 【 为 选 定 属性 适应 缓冲 】 按 钮 ， 在 弹出 
的 面板 中 ， 选 择 【 无 缓冲 〗 选 项 ， 即 可 取消 
缓冲 效果 。 





4. 垂直 缩放 
在 【动画 编辑 器 】 面板 中 . 单 击 右 下 角 的 下 拉 


党国 练习 : 制作 圣诞 贺卡 


在 本 练习 中 ， 通 过 逐 帧 的 形式 将 英文 字母 依次 显示 出 来 ， 并 
通过 设置 其 显示 颜色 ， 实 现 一 种 闪烁 的 动画 效果 。 另 外 ， 在 制作 
贺卡 时 ， 需 要 将 每 一 帧 都 定义 为 关键 帧 ， 然 后 为 每 个 帧 创建 不 同 
的 动画 内 容 ， 同 时 通过 以 递增 方式 修改 动画 帧 内 容 的 方法 ， 来 实 
现 最 终 的 圣诞 贺卡 动画 效果 。 


























新 建文 档 


ee . Merry Chris , 


WE 时 导入 素材 


设置 帧 频 
插入 关键 由 
= i 3 i [| 设置 文字 属性 
| SA 添加 小 镜 
erry Christmas!. Merry Christmas!. 

De ee A 出 We i 二 9 > 





操作 步骤 “》》》 STEP|03 在 【时间 轴 】 面 板 中 选择 第 30 帧 ， 右 
STEPI|01 执行 【文件 】| 【新 建 】 命 令 ， 在 弹出 的 ” 击 执行 【插入 帧 】 命 令 ， 插 入 一 个 普通 帧 。 

【新 建 】 对 话 框 中 .选择 文档 类 型 .设置 文档 参数 
并 单 击 【确定 】 按 钮 。 





























STEPI04 单 击 【 时 间 轴 】 面板 中 的 【新 建 图 层 】 
按钮 ， 新 建 一 个 图 层 。 












































STEP|02 执行 【文件 】 | 【导入 】| 【导入 到 舞台 :2 
命令 ， 在 弹出 的 【导入 】 对 话 框 中 选择 导入 文件 ， “= 
单 击 【 打 开 ] 按钮 。 STEP|05 在 【时间 轴 】 面 板 中 ， 选 择 “ 图 层 2 
中 的 第 5 帧 ， 右 击 执行 【插入 关键 帧 〗】 命 令 ， 插 入 
关键 帧 。 


DBPISAIE TEELE I 












































136 





第 6 章 ”交互 动画 设计 














STEPI06 单 击 【 工 具 箱 】 面 板 中 的 【文本 工具 ] 








按钮 在 舞台 中 输入 字母 M， 并 在 【属性 】 面 板 
中 设置 文本 的 字体 格式 和 字体 颜色 (白色 ) 。 


及 31 CE 于 | 



































STEP|07 在 第 6 帧 处 插入 关键 帧 ， 使 用 【文本 工 
具 】 在 字母 M 后 面 继续 输入 字母 



































网 





STEP|11 分 别 选择 “图 层 2” 和 “图 层 3”， 在 第 
21 帧 处 插入 关键 帧 ， 将 舞台 中 字母 的 颜色 更 改 为 
【橘红 色 】 ( 考 98E00) 。 









































STEP|08 使 用 同样 的 方法 ， 在 第 7、8、9 帧 处 分 
别 插入 关键 帧 ， 并 分 别 输入 字母 r、T、y。 























ET 











STEP|12 然后 . 在 第 22 帧 处 插入 关键 帧 , 并 将 舞 
人 台中 字母 的 颜色 更 改 为 【紫色 】 (三 AB7F0) 。 





























回回 但 CETTE ETT | 汪 Oeee 一 as 玫 

















STEPI09 新 建 “ 图 层 3 ， 在 第 10 帧 处 插入 关键 
贞 ， 并 在 舞 合 中 输入 字母 C。 

STEP|10 然后 .在 第 11~19 帧 处 分 别 插入 关键 帧 . 
并 使 用 【文本 工具 ] 在 字母 C 后 面 继续 输入 文本 h、 


J 




























































































STEP|13 根据 上 述 步 又 ,在 图 层 2 和 图 层 3 的 第 
23~26 帧 处 插入 关键 帧 , 并 将 文字 颜色 依次 更 改 为 
【棕色 】(#DFAE47) 、【 绿 色 】(#A4CB58)、 【红色 】 


























( 古 F436B) 和 【白色 】 (在 FFFFF ) 。 


























STEP|14 在 “图 层 2” 和 “图 层 3” 的 第 27 帧 处 
分 别 插入 关键 帧 ,在 【属性 】 面 板 中 添加 【投影 】 
滤 镜 ， 设 置 其 参数 并 将 【颜色 】 设 置 为 【灰色 】 
(OOOCCCh 





0 Ch ristmas| 


RE 

















Flash 动画 广告 是 网 页 广告 中 一 种 常见 的 形式 , 它 具 有 多 样 化 
































操作 步骤 “》》》 


STEP|01 执行 【文件 】| 【新 建 】 命 令 . 在 弹出 的 








【新 建 】 对 话 框 中 设置 文档 类 型 和 参数 . 并 单 
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上 【 确 

















的 表现 手法 ， 可 以 更 加 形象 、 真 实地 反映 出 广告 的 主题 。 在 本 练 庆 朋 是 且 于 餐 
习 中 ， 将 运用 绘制 工具 、 关 键 帧 及 补 问 动画 等 功能 ， 来 制作 一 个 使 用 填充 工具 
网 页 时 尚 广告 。 


使 用 文本 工具 


创建 补 间 动 画 
创建 补 间 形 状 
设置 透明 度 





定 】 按 钮 。 
STEP|02 单 击 【 工 具 箱 】 面 板 中 的 【和 矩形 工具 ] 
按钮 . 在 舞台 中 绘制 一 个 任意 填充 颜色 的 矩形 . 其 











大 小 与 舞台 相同 。 
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STEP|06 选择 第 1 帧 ,在 【属性 】 面 板 中 的 【 色 
彩 效果 】 选 项 卡 中 ,将 “背景 ”图 形 元 件 的 Alpha 
设置 为 50%。 











二 1 国 . 也 搜 [10% 加 




















STEP|I03 选择 矩形 形状 ， 执 行 【 修 改 】| 【转换 为 


元 件 】 命 令 , 在 弹出 的 【 转 
名 称 设置 为 “背景 ， 单 击 


换 为 元 件 】 对 话 框 中 将 
【确定 】 按 钮 。 










































































STEP|07 然后 . 选择 第 20 帧 , 在 【属性 】 面 板 中 
的 【色彩 效果 】 选 项 卡 中 , 将 “背景 ”图 形 元 件 的 
Alpha 设置 为 100%。 


























4 加 ji81 














STEP|04 重 命名 图 层 . 右 





建 补 间 动 画 】 命 令 ， 创建 补 间 动 画 。 
STEP|05 然后 . 在 第 175 帧 处 ， 右 击 执行 【插入 





帧 】 命 令 ， 插入 普通 帧 。 








图 层 第 1 帧 . 执行 【 创 
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网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 


STEP|08 新 建 “ 透 明 条 ”图 层 . 在 第 20 帧 处 ， 
右 击 执行 【插入 关键 帧 】 命 令 ， 插入 一 个 关键 帧 。 








STEP|09 单 击 【 工 具 箱 】 面 板 中 的 【 甜 形 工具 】 
按钮 ， 在 舞台 下 半 部 绘制 一 高 度 为 20px 的 白色 和 矩 
形 形 状 , 并 将 其 转换 为 名 为 “透明 条 ”的 图 形 元 件 。 


rE Cm 
























































STEP|10 然后 , 在 【属性 】 面 板 中 的 【色彩 效果 】 
选项 卡 中 ， 将 Alpha 设置 为 7%。 


二 









































STEP|11 在 第 25 帧 处 , 插入 关键 帧 , 复制 该 “ 透 
明 条 ”图 形 元 件 ， 并 向 下 移动 。 同 时 ,在 【属性 】 
面板 中 ， 将 Alpha 设置 为 24%。 

STEP|12 然后 . 分 别 在 第 30、35、40、45 帧 处 插 
入 关键 帧 ， 每 个 关键 帧 递增 一 个 图 形 元 件 ， 并 将 
Alpha 分 别 设置 为 50%、60%、75% 和 100%。 
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STEP|13 新 建 “ 花 纹 ” 图 层 . 在 第 55 帧 处 插入 关 
键 帧 。 执 行 【 文 件 】|【 导 入 】|【 打 开外 部 库 】 命 
令 , 选择 素材 文档 ， 单 击 【 打 开 】 按 钮 。 











m 打开 EE 
00) ve me 了 
EE 新 建文 件 交 四 选择 国 [-] 回 @ 
安 归功 交 
入 下 到 
mm sm 
0 





文件 (NJ: 素 奢 fa 


g ee 
打开 (0) 取消 
STEP|14 在 【 库 : 素材 】 面板 中 ,将 “花纹 ”图 
形 元 件 拖 入 到 舞台 中 , 并 在 【属性 】 面 板 中 设置 其 

色彩 效果 。 


和 国 j381 
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CE er 
































STEP|15 新 建 “ 遮 晶 层 ”图 层 . 在 第 55 帧 处 插入 
关键 帧 ， 在“ 花纹” 图形 元 件 底部 绘制 一 个 矩形 
形状 。 
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STEP|16 在 第 75 帧 处 插入 关键 帧 , 使 用 【任意 变 











形 工具 】 向 上 拖 动 矩形 形状 ,使 其 覆盖 “花纹 ” 
形 元 件 的 部 分 区 域 。 


Br 
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STEP|17 然后 ， 右 击 第 55 帧 和 第 75 帧 之 间 的 任 
意 一 帧 ,执行 【创建 补 间 形 状 】 命 令 . 创建 补 间 形 
状 动画 。 
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STEP|18 在 第 76 帧 处 插入 关键 帧 . 使 用 【基本 椭 
圆 工具 ]】 在 “花纹 ”图 形 元 件 的 圆 形 位 置 绘 制 一 个 
扇形 。 
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STEP|19 在 第 77 帧 处 插入 关键 帧 , 使 
具 】 沿 逆 时 针 方向 扩大 该 扇形 区 域 。 























【选择 工 














STEP|20 使 用 相同 的 方法 ,在 第 78-90 帧 处 插入 
关键 帧 . 并 逐步 扩大 该 扇形 区 域 , 直到 覆盖 整个 “ 花 
纹 ” 图 形 元 件 。 
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STEP|21 选择 扇形 和 和 矩形. 执行 【修改 】| 【分 类 】 
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;网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 : 








STEP|22 右 击 “ 遮 军 








层 . 执行 【 遮 曾 层 】 


并 
网 

















新 手 训练 营 





命令 .将 其 转换 为 遮 曾 层 。 
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练习 1: 制作 3D 相册 
全 downloads\6\ 新 手 训练 营 \ 制 作 3D 相册 
提示 : 本 练习 中 ,首先 新 建文 档 导入 素材 , 创建 
影片 剪辑 元 件 ， 绘 制 矩 形 形 状 并 设置 其 属性 。 同 时 
新 建 图 层 ， 添 加 图 像素 材 并 设置 其 属性 。 然 后 ,创建 
相册 影片 剪辑 ， 添 加 图 像 到 剪辑 中 ， 并 设置 其 属性 。 
返回 到 场景 中 ,添加 相册 影片 剪辑 并 设置 其 属性 。 最 
后 ,创建 普通 帧 ， 同 时 创建 补 间 动 画 ， 并 添加 3D 补 
间 动 画 。 紧 接着 ， 插 入 旋转 关键 帧 ， 并 在 【动画 编辑 

器 】 面 板 中 设置 旋转 效果 。 























练习 2: 制作 图 片 展示 动画 

信 downloads\6\ 新 手 训 练 营 \ 制 作 图 片 展示 动画 

提示 : 本 练习 中 ,首先 新 建文 档 并 导入 素材 。 在 
图 层 中 插入 普通 帧 后 ,新 建 图 层 ， 导入 素材 并 将 其 转 
换 为 影片 剪辑 文件 。 然 后 为 影片 剪辑 设置 动画 预 设 
效果 , 在 该 图 层 中 最 后 一 帧 插入 普通 帧 。 同 时 ,新 建 
图 层 . 插入 关键 帧 并 将 素材 导入 到 舞台 中 ,转换 为 影 
片 剪 辑 设置 其 属性 ， 并 为 其 应 用 动画 预 设 。 最 后 ， 依 
次 新 建 图 层 . 分 别 导入 素材 到 舞台 中 , 并 为 其 应 用 动 
画 预 设 。 











练习 3: 制作 网 站 进入 动画 

人 〇 downloads\6\ 新 手 训 练 营 \ 制 作 网 站 进入 动画 

提示 : 本 练习 中 ,首先 新 建文 档 , 打开 外 部 库 导 
入 素材 , 同时 在 不 同 的 帧 处 设置 影片 剪辑 的 属性 并 插 
入 关键 帧 ,创建 补 间 动 画 。 然 后 ,新 建 图 层 ， 添 加 进 
度 条 素材 ， 并 分 别 设置 其 补 间 动 画 和 遮 军 层 。 同 时 
新 建 图 层 ， 插 入 关键 帧 ， 添 加 矩形 背景 素材 ， 设 置 其 
投影 和 模糊 滤 镜 并 创建 补 间 动 画 。 最 后 ， 新 建 图 层 ， 
依次 添加 箭头 形状 并 设置 其 补 间 动 画 和 关键 帧 。 同 
时 ， 输 入 文本 并 设置 文本 的 属性 和 补 间 动 画 。 
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练习 4: 制作 会 员 注册 页 

人 〇 downloads\6\ 新 手 训练 营 \ 制 作 会 员 注 册页 

提示 : 本 练习 中 . 首先 新 建文 档 , 在 舞台 项 部 绘 
制 圆 角 矩形 ,同时 绘制 圆 环 并 设置 其 属性 。 同 时 ， 输 
入 文本 并 设置 文本 的 大 小 和 颜色 。 然 后 ， 新建 图 层 ， 
依次 从 添加 相应 的 组 件 ， 并 设置 组 件 实例 名 称 和 属 
性 。 最 后 , 新 建 图 层 . 打开 【动作 】 面板 , 通过 TileList 
对 象 的 addItem() 方 法 为 组 件 实例 添加 图 片 , 指定 图 片 
的 名 称 ， 创 建文 本 样式 并 将 其 应 用 到 所 有 组 件 中 。 





























练习 5: 制作 心里 测试 程序 

全 downloads\6\ 新 手 训练 营 \ 制 作 心里 测试 程序 

提示 : 本 练习 中 , 首先 新 建文 档 ， 导 入 素材 。 同 
时 . 新 建 图 层 . 输入 标题 文本 并 在 其 下 方 绘制 一 条 直 
线 。 依 次 添加 相应 的 组 件 ， 并 设置 组 件 的 实例 名 称 和 
属性 。 然 后 ,新 建 图 层 ,输入 测试 题目 ,在 其 下 方 创 
建 组 件 ， 并 设置 组 件 的 实例 名 称 和 属性 。 最 后 , 新 建 
图 层 ,打开 【动作 】 面 板 .输入 相应 命令 ,并 将 实例 
存储 到 数组 中 .同时 为 实例 的 标签 文字 应 用 样式 。 


7 
本 旭日， 元 好 了 和 孤 目 人 半 站 后， 体 较 有 可 能 为 了 什么 理由 而 后 人 





Adobe Dreamweaver 简称 DW, 其 中 文 名 称 为 “梦想 编织 者 是 目前 业界 最 流行 的 静态 网 页 制作 与 
网 站 开发 工具 。 网 页 中 的 文本 原始 是 网 页 设计 中 不 可 或 缺 的 内 容 ， 具有 传达 信息 和 表达 网 页 主题 要 素 的 
作用 : 而 Dreamweaver 在 处 理 网 页 文本 方面 具有 非常 强大 的 功能 . 可 以 为 网 页 文本 设置 样式 、 管 理 段落 、 
创建 列表 .还 可 以 为 网 页 添加 各 种 特殊 文本 以 及 线条 。 

在 本 章 中 .将 详细 介绍 Dreamweaver CC 在 设置 网 页 文档 方面 的 操作 ， 以 及 设置 网 页 文本 、 插 入 项 
目 列表 和 设置 文本 格式 等 网 页 文本 制作 的 基础 知识 和 操作 技巧 。 





Dreamweaver CC 


3 第 7 章 ”设置 网 页 文本 





简介 





Dreamweaver 使 用 所 见 即 所 得 的 接口 ， 亦 有 
HTML 编辑 功能 .包含 设计 网 站 前 合 页 面 和 开发 网 
站 后 合 程序 两 个 功能 ， 目 前 可 以 使 用 于 Mac 和 
Windows 系统 中 。 通 过 Dreamweaver .用户 既 可 以 
快速 创建 基于 Web 标准 的 网 页 ， 也 可 以 便捷 地 开 
发 各 种 大 型 网 站 项 目 。 


7.1.1 Dreamweaver CC 新 增 
功能 


作为 Dreamweaver 系列 软件 中 的 最 新 版 本 . 
Adobe 公司 在 Dreamweaver CC 中 增加 和 增强 了 许 
多 新 的 功能 , 这 些 新 功能 不 仅 可 以 帮助 用 户 轻松 创 
建 和 更 新 Web 和 移动 内 容 ， 而 且 还 可 以 帮助 用 户 
查看 、 导 航 和 编辑 HTML 标记 。 

1. 设备 预览 

Dreamweaver 新 增 的 设备 预览 功能 , 可 以 让 用 
户 在 多 个 设备 上 同时 测试 即将 发 布 的 正式 版 网 页 。 
通过 该 功能 , 不 仅 可 以 查看 网 页 如 何在 各 种 外 形 规 
格 下 进行 回流 ， 而且 还 可 以 在 页 面 中 测试 交互 功 
能 。 并 且 ， 在 使 用 该 功能 时 ， 用 户 无 需 安装 任何 移 
动 应 用 程序 或 连接 物理 设备 到 桌面 . 只 需 使 用 设备 扫 
描 自动 生成 的 OR 代码 ， 即 可 在 设备 上 预览 网 页 。 

另外 ,在 桌面 上 触发 的 实时 检查 会 反映 在 所 有 
已 连接 设备 上 , 以 帮助 用 户 检查 各 种 元 素 并 按 需要 
调整 设计 。 
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2. 可 视 媒体 查询 

新 增 的 可 视 媒体 查询 功能 . 可 以 直观 显示 页 面 
中 的 媒体 查询 . 并 可 帮助 用 户 可 视 化 不 同 断 点 处 的 
网 页 以 及 网 页 组 件 在 不 同 视 口 中 的 回流 的 差异 程 
度 。 而 且 . 该 功能 可 以 在 不 影响 其 他 视 口 页 面 设计 
的 情况 下 . 在 不 同 视图 中 查看 页 面 及 进行 特定 于 某 
个 视图 的 设计 更 改 。 
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每 个 类 别 可 包含 一 个 或 多 个 媒体 查询 。 用 户 可 
通过 单 击 【 显 示 可 视 媒 体 查询 栏 】 按 钮 或 单 击 【 隐 
藏 可 视 媒体 查询 栏 】 按 钮 . 来 隐藏 或 显示 【可 视 媒 
体 查询 】 栏 。 

在 【可 视 媒体 查询 】 栏 的 水 平行 上 包括 绿色 、 
蓝 色 和 紫色 三 栏 。 

口 绿色 包含 max-width 条 件 的 媒体 查询 。 

口 蓝 色 同时 包含 min-width 和 max-width 

条 件 的 媒体 查询 。 

口 紫色 包含 min-width 条 件 的 媒体 查询 。 
3. Linting 和 Emmet 支持 

Linting 是 分 析 代码 以 标记 代码 的 潜在 错误 或 
可 疑 用 法 的 过 程 。 用 户 可 以 使 用 新 版 Dreamweaver 
中 的 linting 代码 ,来 调试 常见 的 错误 代码 。 
Dreamweaver 可 以 在 加 载 .保存 或 编辑 HTML.CSS 
和 JavaScript 文件 时 对 它们 执行 linting， 其 错误 和 
警告 将 在 新 的 输出 面板 中 列 出 。 

对 于 喜欢 使 用 代码 来 设计 网 页 的 开发 人 员 来 
讲 . 其 新 版 本 中 增加 的 Emmet 缩写 代码 功能 ， 将 
会 节省 开发 人 员 编 写 代 码 的 时 间 因 为 Emmet 缩写 
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很 容易 记忆 和 输入 。 例 如 . 当 用 户 按 Tab 键 时 . 它 
们 将 会 在 【代码 】 视 图 中 展开 为 完整 的 代码 。 
4. 代码 视图 预览 功能 

新 版 本 的 Dreamweaver 增加 了 代码 视图 实时 
预览 功能 ， 当 用 户 使 用 【 拆 分 】 视 图 时 ,可 在 【 实 
时 】 或 【设计 】 视 图 中 实时 查看 对 图 像 或 颜色 所 做 
的 任何 更 改 。 而 当 用 户 使 用 【代码 】 视 图 时 ,旧版 
本 中 会 将 图 像 仅 显示 为 名 称 , 同时 会 将 颜色 显示 为 
一 组 模糊 的 数字 (除非 使 用 了 预定 义 的 颜色 ) 。 

新 版 本 中 的 代码 视图 预览 功能 ， 可 以 直接 在 
【代码 】〗】 视 图 内 快速 预览 图 像 和 颜色 ， 以 帮助 用 户 
从 视觉 上 将 图 像 文 件 名 和 颜色 格式 与 所 呈现 的 实 
际 图 像 或 颜色 联系 起 来 。 由 此 ., 可 加 快 设计 决定 的 
速度 并 大 幅 减 少 开发 时 间 。 
5. Bootstrap 集成 

Bootstrap 是 用 于 开发 响应 迅速 、 移 动 优 先 网 
站 的 最 受 欢迎 的 免费 HTML、CSS 和 JavaScript 框 
架 。 该 框架 包括 响应 迅速 的 CSS 和 HTML 模板 . 
适用 于 按钮 、 表 格 、 导 航 、 图 像 旋转 视图 以 及 可 能 
会 在 网 页 上 使 用 的 其 他 元 素 。 除 此 之 外 ,Bootstrap 
还 提供 了 部 分 可 选 的 JavaScript 插件 ， 以 协助 只 具 
备 基本 编码 知识 的 开发 人 员 也 可 以 开发 出 快速 响 
应 的 出 色 网 站 。 

通过 新 版 本 的 Dreamweaver, 用 户 不 仅 可 以 创 
建 Bootstrap 文档 , 而 且 还 可 以 使 用 Bootstrap 来 创 
建 现 有 的 网 页 。 
用 户 可 以 执行 【文件 】|【 新 建 】 命 令 ， 在 弹 
出 的 【新 建文 档 】 对 话 框 中 打开 【启动 器 模板 】 选 
项 卡 , 在 其 列表 中 选择 相应 的 模板 , 即 可 开始 设计 
Bootstrap 网 站 。 
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6. 实时 视图 新 增 功能 

Dreamweaver 现在 了 实时 视图 编辑 和 菜单 等 
功能 . 包括 编辑 表格 、 新 增 菜单 .做 套 插入 等 功能 。 

在 新 版 本 的 Dreamweaver 中 ， 用 户 可 以 在 实 
时 视图 中 将 元 素 插入 到 其 他 元 素 之 中 ; 而 当 用 户 在 
【插入 ] 面板 【资源 】 面板 或 实时 视图 中 拖 动 元 素 ， 
并 将 鼠标 悬 停 在 页 面 上 的 不 同 元 素 上 时 ., 会 看 到 谋 
套 元 素 的 可 视 化 反馈 。 

除 此 之 外 ,用 户 还 可 以 使 用 【元 素 显示 】 中 的 
格式 设置 选项 ,或 者 执行 【修改 】| 【表格 】 命 令 ， 
在 实时 视图 中 轻松 、 快 速 地 编辑 表格 。 
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130188 快 易 典 电子 洞 奥 全 能 A810 (白色 ) 





231541 Ciinique 青 内 保洁 潜水 2 号 200ml 





182172 松下 (Panasonic) FX65GK 数 码 相机 《 根 色 》 
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另外 .新 版 本 中 的 实时 视图 中 ,还 提供 了 修改 、 
格式 、 命令 、 站点、 编辑 等 菜单 ， 以 使 实时 视图 
的 编辑 功能 更 加 完善 。 
7. DOM 面板 

新 版 本 的 Dreamweaver 将 元 素 快速 视图 更 改 
为 DOM 面板 , 该 面板 可 以 提供 元 素 快速 视图 所 提 
供 的 所 有 功能 以 及 更 多 功能 。 除 此 之 外 . 用户 可 以 
在 工作 区 中 永久 使 用 该 面板 , 并 允许 用 户 同时 打开 
两 个 文档 和 访问 其 DOM 面板 。 
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某 些 功能 的 预览 . 并 通过 收集 客户 反馈 及 根据 反馈 
来 改进 这 些 功能 ,并 将 其 作为 Dreamweaver 的 核心 
功能 包含 在 内 。 

用 户 可 以 在 【首选 项 】 对 话 框 的 【技术 预览 
选项 卡 中 , 通过 勾 选 【启用 代码 高 亮 显示 】 复 选 框 ， 
来 启用 该 功能 。 
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该 版 本 中 的 预览 功能 为 代码 高 亮 显示 , 也 就 是 
会 高 亮 显 示 代 码 视 图 中 任何 选 定 文本 的 所 有 匹 
配 项 。 

9. 支持 % 单 位 

Dreamweaver 新 增 了 Extract 面板 % 度 量 单位 ， 
当 用 户 单 击 Extract 面板 中 的 资源 时 ， 会 显示 一 个 
在 像素 和 % 之 间 进 行 切换 的 选项 , 用 户 可 通过 不 同 
的 选项 来 查看 不 同 度量 单位 下 的 元 素 属 性 。 
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这 是 Dreamweaver 中 的 PSD。 
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10.【 全 部 】 和 【当前 】 模 式 
新 版 本 的 Dreamweaver 为 用 户 提 供 了 【全 部 】 
和 【当前 】 两 种 不 同 的 CSS Designer 模式 . 用 于 
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其 中 ， 两 种 不 同 模式 的 具体 功能 如 下 所 述 。 

口 【 全 部 】 模 式 ”此 模式 将 列 出 当前 文档 中 
的 所 有 CSS、 媒 体 查询 和 选择 器 ， 而 它 对 
【设计 】〗 或 【实时 】 视 图 中 的 选 定 内 容 不 
敏感 。 如 果 要 创建 CSS、 媒 体 查询 和 选择 
器 ， 此 模式 是 最 佳 选择 。 

口 【 当 前 】 模 式 ”此 模式 将 列 出 【设计 】 或 
【实时 】〗】 视 图 中 所 有 选 定 元 素 的 已 计算 样 
式 。 在 CSS 文件 中 ， 如果 焦 点 位 于 选择 器 
上 ， 则 此 模式 将 显示 此 选择 器 的 属性 。 如 
果 要 编辑 与 文档 中 所 选 元 素 关 联 的 选择 
器 的 属性 ， 此 模式 是 最 佳 选择 。 


除了 上 述 介 绍 的 10 种 新 功能 之 外 ， 
Dreamweaver 还 新 增 或 更 改 了 【插入 】 面 板 、 
【帮助 】 菜 单 、 测 试 服务 器 工作 流程 、 属 性 
值 提示 ， 以 及 页 面 底部 文档 栏 下 拉 菜 单 选 
项 、 编 码 工具 栏 等 功能 。 





7.1.2 ” Dreamweaver CC 工作 
界面 
Dreamweave CC 相对 于 旧版 本 软件 来 讲 ,不 


仅 增 加 了 启动 界面 的 优美 感 . 而 且 在 其 工作 界面 中 
也 进行 一 些 细微 的 改进 。 
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Dreamweaver CC 工作 界面 中 的 窗口 组 成 的 具 口 标签 选择 器 位 于 【文档 】 窗 口 底部 的 状 
体 情况 如 下 所 述 。 态 栏 中 ， 用 于 显示 环绕 当前 选 定 内 容 的 标 
口 菜单 栏 菜单 栏 中 包含 各 种 操作 执行 菜 签 ， 以 及 该 标签 的 父 标签 等 ， 可 体现 出 这 
单 命令 ， 以 及 切换 按钮 如 【最 小 化 〗【 服 些 标签 的 层次 结构 。 
大 化 】 【还原 】 和 【关闭 】 等 按钮 。 口 面板 组 ”显示 Dreamweaver 提供 的 各 种 面 
口 工作 区 切换 器 ”允许 用 户 更 改 窗口 的 界 板 ， 默认 显示 插入 、CSS 设计 器 、CSS 过 
面 以 【新 手 〗 【代码 】、【 团 认 】、 【设计 】 渡 效 果 和 文件 等 面板 。 
或 【Extract】 方 式 显 示 ， 以 及 允许 用 户 进 口 编码 工具 栏 ”用 于 显示 Dreamweaver 中 的 
行 新 建 工作 区 、 管 理工 作 区 和 保存 当前 工 各 种 编码 工具 ， 包 括 打开 文档 、 显 示 代码 
作 区 等 操作 。 浏览 器 、 选 择 父 标签 等 15 种 常用 工具 。 


72 | 设置 网 页 文档 


网 页 是 一 个 文件 , 而 网 站 则 是 由 众多 的 网 页 组 ” 脉络 的 重要 工作 之 一 。 不 管 是 网 页 制作 新 手 还 是 专 
成 的 . 因此 文件 管理 其 实 就 是 对 众多 网 页 的 一 种 管 ” 业 网 页 设计 师 ， 都 必须 从 构建 站 点 开始 。 
理 。 用 户 创 建站 点 之 后 . 便 可 以 根据 网 站 的 整体 设 ”1. 创建 本 地 站 点 























计 着 手 开始 制作 网 页 文件 了 。 在 Dreamweaver 中 ,执行 【站 点 】|【 新 建站 
点 】 命 令 ， 弹出 【站 点 设置 对 命名 站 点 2 
7.2.1 创建 站 点 】 命 令 ， 弹 出 【站 对 象 未 命名 站 点 2】 


对 话 框 。 打 开 【 站 点 】 选 项 卡 ， 在 【站 点 名 称 】 文 
站 点 是 制作 网 站 的 首要 工作 , 是 理 清 网 络 结构 ”本 框 中 输入 站 点 名 称 . 同 时 单 击 【本 地 站 点 文件 夹 】 
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选项 右 侧 的 【浏览 文件 夹 】 按 钮 。 在 弹出 的 对 话 框 的 【基本 】 选 项 卡 中 . 将 【 连 
接 方 法 】 选 项 设置 为 FTP， 并 设置 相应 选项 。 







































































所 设置 的 站 点 名 称 并 不 会 显示 在 浏览 器 中 ， a 
只 会 显示 在 【文件 】 面 板 和 【管理 站 点 】 对 Dm 
口 使 用 其 它 的 FTP 移动 方法 


一 珊 - -到 一 















































然后 ， 在 弹出 的 【选择 根 文件 夹 】 对 话 框 中 . 
选择 站 点 文件 夹 位 置 , 单 击 【 选 择 文件 夹 ] 按钮 即 可 。 其 中 , 在 默认 连接 方法 为 FTP 状态 下 【基本 】 
选项 卡 中 各 选项 的 具体 含义 ， 如 下 所 述 。 

口 服务 器 名 称 ”用 于 指定 服务 器 的 名 称 。 

口 连接 方法 ”用 于 设置 服务 器 的 连接 方法 ， 
包括 FTP、SFTP、FTP over SSL/TLS ( 隐 
式 加 密 )、FTP over SSL/TLS ( 显 式 加 密 )、 
本 地 /网 络 、WebDAV 和 RDS 等 选项 。 

口 FTP 地址 用 于 输入 FTP 服务 器 的 地 址 ， 
其 FTP 地 址 是 计算 机 系统 完整 的 Internet 
名 称 ; 其 右 侧 的 【端口 】 是 FTP 连接 的 跌 

最 后 ， 在 【站 点 设置 对 象 未 命名 站 点 2】 对 头 攻 本 2 

话 框 中 ， 单 击 【 保 存 】 按 钮 即 可 。 eo 
2、 设 加 站 点 服务 器 0 pp 用 于 设置 连接 FIP 所 需 使 用 的 
在 OD 设 于 天 休 到 二 长 让 到 证 得 中 这 二 口 密码 ”用 于 设置 连接 FTP 所 需 使 用 的 密 

开 【 服 务 器 】 选 项 卡 。 默 认 情况 下 .该 选项 卡 中 不 抽风 
存在 服务 器 设置 ,用户 需要 单 击 列表 框 下 方 的 困 按 ee _ ee 
接 远 程 服务 器 时 系统 都 会 提示 输入 密码 。 


钮 ， 来 添加 服务 器 。 _ 
口 测试 ” 单 击 该 按钮 ， 可 以 测试 所 设置 的 

FTP 地 址 、 用 户 名 和 密码 。 

口 根 目 录 用 于 输入 远程 服务 器 上 用 于 存 
储 公开 显示 的 文档 的 目录 (文件 夹 )。 

口 Web URL 用 于 输入 Web 站 点 的 URL。 

口 使 用 被 动 式 FIP 启用 该 复 选 框 , 可 以 使 
本 地 软件 建立 FTP 连接 ,而 非 请 求 远程 服 
务 器 来 建立 FIP 连接 。 
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口 使 用 JPv6 传输 模式 ”启用 该 复 选 框 ， 可 
以 启用 支持 IPV6 的 FTP 服务 器 。 

口 使 用 以 下 位 置 中 定义 的 代理 ”启用 该 复 
选 框 ， 可 以 使 用 【首选 项 对 话 框 中 所 设 
置 的 代理 主机 或 代理 端口 。 

口 使 用 FTP 性 能 优化 ”启用 该 复 选 框 ,可 以 
对 所 连接 的 FIP 服务 器 的 性 能 进行 优化 
操作 。 

口 使 用 其 他 的 FTP 移动 方法 ”启用 该 复 选 
框 ， 可 以 使 用 其 他 FIP 中 移动 文件 的 
范 法 。 


【基本 】〗】 选 项 卡 中 的 【连接 方式 】 选 项 ， 除 
了 FTP 连接 方法 之 外 ， 还 包括 SFTP、FTP 
FTP over 


over SSL/TLS( 隐 式 加 密 )、 
SSL/TLS( 显 式 加 密 )、 本 地 /网 络 和 WebDAV 
连接 方法 。 


在 对 话 框 中 打开 【高 级 】 选 项 卡 , 该 选项 卡 中 
内 容 不 会 随 着 【连接 方式 】 选 项 的 改变 而 改变 ， 


是 固定 不 变 的 。 




















Cu 


加 维护 同步 信息 
口 保存 时 自动 将 文件 上 传 到 服务 器 
口 自用 文件 取出 功能 

区 打开 文件 之 前 取出 


运程 服务 器 









































齐 助 保存 取消 








在 【高 级 】 选 项 卡 中 ., 主要 包括 以 下 几 种 选项 。 

口 维护 同步 信息 启用 该 复 选 框 ， 可 以 自动 
同步 本 地 和 远程 文件 。 

口 保存 时 自动 将 文件 上 传 到 服务 器 ”启用 
该 复 选 框 后 ， 在 保存 文件 时 Dreamweaver 
会 自动 将 文件 上 传 到 远程 站 点 。 

口 启用 文件 取出 功能 ”启用 该 复 选 框 ， 可 以 
激活 “ 存 回 /取出 ”系统 ， 同 时 激活 【打开 
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文件 之 前 取出 】【〖 取 出 名 称 】 和 【电子 邮 
件 地 址 】〗】 选 项 。 

口 服务 器 模型 ”用 于 设置 测试 服务 器 类 型 ， 
包括 JSP、PHP MySQL、ASP VBScript 等 
8 种 类 型 。 

口 始终 自动 保存 相关 文件 启用 该 复 选 框 ， 
系统 会 自动 保存 相关 联 的 文件 。 


除了 【服务 器 〗 选 项 之 外 ， 用 户 还 可 以 设置 
站 点 的 【版 本 控制 】〗】 和 【高 级 设置 〗 选 项 。 





7.2 


其 保 


PHP 


.2 创建 网 页 文档 


创建 站 点 之 后 , 用 户 便 可 以 创建 网 页 文档 , 将 
存 到 站 点 中 ， 并 对 网 页 文档 进行 设置 和 浏览 。 
Dreamweaver 为 用 户 提供 了 HTIML. CSS. JS、 
等 多 种 文档 类 型 ， 不 仅 可 以 创建 空白 网 页 文 


档 , 而 且 还 可 以 创建 流体 网 格 布局 文档 、 启 动 器 模 


板 和 





网 站 模板 文档 。 


1. 创建 空白 文档 


全 从 
命令 


在 Dreamweaver 中 ， 用 户 可 通过 欢迎 屏幕 和 
菜单 两 种 方法 来 新 建文 档 。 
启动 Dreamweaver 软件 . 在 欢迎 屏幕 中 的 【新 











建 】 栏 中 , 选择 所 需 创建 的 文档 类 型 , 即 可 快速 创 
建 所 选 文档 类 型 的 空白 文档 。 








建 】 命 令 . 在 弹出 的 【新 建文 档 】 对 话 框 中 . 打开 


【新 寻 


在 Dreamweaver 窗口 中 ,执行 【文件 】| 【新 











文档 】 选 项 卡 ， 在 【文档 类 型 】 列 表 中 选择 


HTML 文档 类 型 . 然后 在 【框架 】 列 表 中 选择 一 种 
框架 类 型 . 单 击 【 创 建 】 按 钮 即 可 。 






































[| [i 


在 Drdamweaver 窗口 中 ,用户 可 通过 CtrlHN 
组 合 键 ， 快 速 打开 【新 建文 档 】 对 话 框 。 


2. 创建 流体 网 格 文档 

流体 网 格 布局 , 可 以 帮助 用 户 创建 可 以 应 对 不 
同 屏幕 尺寸 的 CSS 布局 。 而 新 版 的 Dreamweaver 
将 流体 网 格 文档 归纳 到 【新 建文 档 】 类 中 了 ， 用户 
只 需 执行 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 【新 
建文 档 】 对 话 框 中 ,打开 【新 建文 档 】 选 项 卡 . 选 
择 【 流 体 网 格 (旧版 )】 选 项 ， 单 击 【 创 建 〗 按 钮 





3. 创建 启动 器 模板 文档 

Dreamweaver 附带 启动 器 模板 , 以 帮助 用 户 设 
计 站 点 页 面 。 

执行 【文件 】| 【新 建 】〗 命 令 ， 在 弹出 的 【新 
建文 档 】 对 话 框 中 ,打开 【启动 器 模板 】 选 项 卡 . 








在 【示例 文件 夹 】 列 表 框 中 选择 模板 类 型 . 同时 在 
【示例 页 】 列 表 中 选择 一 种 模板 ， 单 击 【创建 】 按 
钮 即 可 。 
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用 户 也 可 以 在 欢迎 屏幕 中 ， 选 择 【 新 建 〗 栏 
中 的 【启动 器 模板 】 选 项 ， 来 打开 【新 建文 
档 】 对 话 框 。 





4. 创建 网 站 模板 文档 

网 站 模板 文档 是 基于 用 户 所 创建 的 网 站 模板 
文件 进行 创建 的 . 在 创建 之 前 用 户 还 需要 将 网 站 中 
的 文档 保存 为 模板 类 型 . 否则 将 无 法 显示 模板 示例 
内 容 。 

执行 【文件 】| 【新建 】〗 命 令 ， 在 弹出 的 【新 
建文 档 】 对 话 框 中 ,打开 【网 站 模板 】 选 项 卡 ,在 
【站 点 】 列 表 框 中 选择 一 个 站 点 ,同时 选择 一 个 站 
点 模板 ， 单 击 【 创 建 】 按 钮 即 可 。 




















:2.3 


设置 网 页 属性 


页 面 属性 关乎 整个 网 页 页 面 的 美观 性 .是 网 页 
设计 的 基础 。 而 页 面 属性 , 是 对 网 页 文档 中 的 内 容 
进行 的 简单 定义 。 

执行 【修改 】| 【页面 属性 】 命 令 ， 弹 出 【页 
面 属性 】 对 话 框 。 在 【页 面 属性 】 对 话 框 中 的 【分 
类 】 栏 中 .为 用 户 提供 了 【外 观 (CSS)】、 【外观 
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(HTML)】、 【链接 (CSS)]、 【标题 (CSS)].【 标 
题 /编码 】 和 【跟踪 图 像 】6 个 选项 卡 。 
1. 外 观 (CSS) 

在 【页 面 属性 】 对 话 框 中 . 打开 【外 观 (CSS)】 
选项 卡 ,指定 网 页 中 包括 字体 、 背 景 颜色 、 背 景 图 
像 等 若干 基本 页 面 的 布局 选项 。 





sam (ess) 
页面 字体 (9: 加 本 Us 二 v][ 
大 9:[ 司 状 国 
文本 机 ED: 国 [ | 
Ha): 加 [| 
背 果 图 你 人 ee [ET 
重 页 全 : 








让 io 距 加 :| 
上 ibm 人):[ 


右边 距 (8)， pv 
下 边 距 (9) mv 

















村 荔 如 ] 





胡 |[ 了 








在 【外 观 (CSS)】 选 项 卡 中 ， 主 要 包括 下 列 
几 个 选项 。 

口 页 面 字体 用 于 指定 在 网 页 中 使 用 的 默 
认 字 体系 列 。 

口 大 小 指定 在 网 页 中 使 用 的 默认 字 
体 的 大 小 。 

口 文本 颜色 用 于 指定 显示 字体 时 所 使 用 
的 默认 字体 颜色 , 可 通过 单 击 【 文 本 颜色 】 
框 来 选取 颜色 。 

口 背景 颜色 用 于 设置 页 面 的 背景 颜色 ， 可 
通过 单 击 【 背 录 颜色 】〗 框 来 选取 颜色 。 

口 背景 图 像 ”用 于 设置 背 录 图 像 ， 可 通过 单 
击 【 浏 览 〗 按 钮 来 选取 背景 图 像 文件 。 

口 重复 ”用 于 指定 背景 图 像 在 页 面 上 的 显 
示 方式 , 其 中 no-repeat 选项 表示 仅 显示 背 
景 图 像 一 次 ，repeat 选项 表示 横向 和 纵向 
重复 或 平 铺 图 像 ，repeat-x 选项 表示 可 横 
向 平 铺 图 像 ，Iepeat-y 选项 表示 可 纵向 平 
铺 图 像 。 

口 左 / 右 /上 /下 边 距 用 于 指定 网 页 文档 中 
内 容 到 浏览 器 左 侧 、 右 侧 、 上 侧 和 下 侧 的 
距离 。 

2. 外 观 (HTML) 
在 【页 面 属性 ] 对 话 框 中 .打开 【外观 (HIML)】 





: 网 页 制作 与 网 站 组 建 CC 2015 中 文 版 ) 从 新 手 到 高 手 : 





选项 卡 ， 以 HTML 或 XHTML 标签 
义 网 页 文档 中 一 些 基本 对 象 的 样式 。 


的 属性 方式 定 


外 观 omm) 
背景 图 像 (D)- [ 
背景 (6) 加 851619 
文本 四 : 天 |[W91717 | 已 访 ai 接 亿 : 天 | [#1551E3 ] 
谤 接 (O): 加 EECA517 | 活动 村 摘 (A); 国 ||ta4c450 | 





iD:[ ] 
iw (e): [ 


边 距离 度 () 
边 距 高 度 (1) 








寺 助 好 | 








[LR | [RW | 











在 【外 观 (HTML)】 选 项 卡 中 ， 主 要 包括 下 
列 几 个 选项 。 
口 背景 图 像 ”用 于 设置 网 页 的 背景 图 像 ， 可 
通过 单 击 【 浏 览 按 钮 选取 背景 图 像 文件 。 
口 背景 ”用 于 设置 页 面 的 背景 颜色 ， 单 击 
【文本 颜色 】〗 框 可 选取 背 录 颜色 。 
口 文本 ”用 于 指定 文本 的 默认 颜色 。 
口 已 访问 链接 用 于 指定 已 访问 链接 的 
磊 色 。 
口 链接 用 于 指定 链接 文本 的 颜色 。 
口 活动 链接 用 于 指定 当 和 鼠标 (或 指针 ) 在 
链接 上 单 击 时 所 应 用 的 颜色 。 
口 左 / 上 边 距 用 于 指定 页 面 到 浏览 器 左 侧 
和 上 侧 的 距离 。 
口 边 距 宽度 /高 度 用 于 指定 页 面 到 浏览 器 
右 侧 和 下 侧 的 距离 。 
3. 链接 (CSS) 
在 【页 面 属性 】 对 话 框 中 , 打开 【链接 (CSS)】 
选项 卡 ， 指 定 链接 字体 样式 、 字 体 大 小 、 颜 色 等 
选项 。 


借阅 (Css) 

拼接 字 森 (I): | 加 《后面 字体 ) v] | v 
大 小 (9) v|m 

刘 拉 其): 国 [ 

















| 交换 图 你 链 接 (B): 
活动 钴 拘 (4) 




















已 访 a 接 (): 国 [ 
下 和 式 (有 




















mv FE 写 




















在 【链接 (CSS)】〗 选 项 卡 中 .主要 包括 下 列 
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几 个 选项 。 选项 卡 . 指定 用 于 创作 网 页 的 语言 专用 文档 编码 类 
口 链接 字体 ”用 于 指定 链接 文本 使 用 的 默 ” 型， 以 及 与 该 编码 类 型 配合 使 用 的 Unicode 范式 。 
认 字 体系 列 。 
口 大 小 ”用 于 指定 链接 文本 的 字体 大 小 ,其 本 是 填 朋 
字体 单位 可 以 为 px (像素 )、pt (点 ) 、 正 人 = 
(英寸 )、cm (厘米 ) 等 。 ET v 
口 链接 颜色 用 于 指定 应 用 于 链接 文本 的 ee 
颜色 。 HR 
口 已 访问 链接 “用 于 指定 应 用 于 已 访问 链 0 0 






































接 的 颜色 。 本 

口 变换 图 像 链接 ”用 于 指定 当 鼠 标 〈 或 指 
针 ) 位 于 链接 上 时 所 出 现 的 颜色 。 

口 活动 链接 用 于 指定 当 鼠 标 (或 指针 ) 在 
链接 上 单 击 时 所 出 现 的 颜色 。 

口 下 划 线 样式 用 于 指定 应 用 于 链接 的 下 
划 线 样式 ， 包 括 【〖 始 终 有 下 划 线 】 【始终 
无 下 划 线 〗、【 仅 在 变换 图 像 时 显示 下 划 
线 】 和 【变换 图 像 时 隐藏 下 划 线 】4 种 





在 【标题 /编码 】 选 项 卡 中 ， 主 要 包括 下 列 几 

个 选项 。 
口 标题 用 于 指定 在 “文档 ”窗口 和 大 多 数 
浏览 器 窗口 标题 栏 中 所 出 现 的 页 面 标题 。 
口 文档 类 型 ”用 于 指定 一 种 文档 类 型 定义 。 
口 编码 ”用 于 指定 文档 字符 所 使 用 的 编码 ， 
当 用 户 选择 Unicode(UTF-8) 选 项 时 则 不 


样式 需要 实体 编码 。 
4. 标题 (CSS) 口 重新 载 入 单 击 该 按钮 可 以 转换 现 有 文 
. 档 或 者 使 用 新 编码 重新 打开 它 。 


在 【页 面 属性 】 对话 框 中 . 打开 【标题 (CSS)】 
选项 卡 , 指定 页 面 标题 的 字体 . 字体 大 小 和 颜色 等 。 

在 【标题 (CSS)】 选 项 卡 中 ,主要 包括 下 列 
两 个 选项 。 


口 Unicode 标准 化 表单 ”只 有 将 【编码 】 选 
项 设置 为 Unicode(UTF-8) 时 该 选项 才 被 
激活 ， 它 包括 4 种 Unicode 范式 。 
口 包括 Unicode 签名 (BOM) 启用 该 复 选 
框 , 可 以 在 文档 中 包括 一 个 字 节 顺序 标记 
(BOM)。 而 BOM 是 位 于 文本 文件 开头 的 
2 一 4 个 字 节 ， 可 将 文件 标识 为 Unicode。 
6. 跟踪 图 像 
在 【页 面 属 性 】 对 话 框 中 ,打开 【跟踪 图 像 】 
选项 卡 , 用 于 设置 在 设计 页 面 时 用 作 向 导 参 考 的 图 
像 文 件 。 





标题 6(@) 


四 四 四 加 加 加 < 














者 助 (0 




















口 标题 字体 ”用 于 指定 标题 文本 使 用 的 上 默 
认 字 体系 列 。 
口 标题 1-6 用 于 指定 最 多 6 个 级 别 的 标题 
标签 使 用 的 字体 大 小 和 颜色 。 
5. 标题 /编码 
在 【页 面 属性 】 对 话 框 中 ,打开 【标题 /编码 】 在 【跟踪 图 像 】 选 项 卡 中 , 主要 包括 下 列 两 个 
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:网 页 制 (CC 2015 中 文 版 ) 从 新 手 到 高 手 


选项 : 
口 跟踪 图 像 ”用 于 指定 在 复制 设计 时 作为 
参考 的 图 像 ， 可 通过 单 击 【 浏 览 











选取 图 像 文件 。 该 图 像 只 供 参考 ， 并 不 会 
文本 是 网 页 主页 元 素 之 一 . 一般 以 普通 文字 、 
段落 或 各 种 项 目 符号 等 形式 进行 显示 。 由 于 文本 具 
有 易于 编辑 、 存储 空间 小 等 优点 . 因此 在 网 站 制作 
中 具有 不 可 取代 的 地 位 。 
7.3.1 插入 网 页 文本 


在 Dreamweaver 中 ， 除 了 可 以 手动 输入 网 页 
文本 之 外 , 还 可 以 通过 粘贴 和 导入 的 方法 , 来 插入 
网 页 文本 。 

1. 直接 输入 

直接 输入 是 创建 网 页 文本 最 常用 的 方法 . 用户 
可 以 在 【代码 和 设计 】 视 图 和 【设计 】 视 图 中 输入 
文本 内 容 。 


rr rR rr Pr) 
| 和 | 一 带 ， 已 : 




















味 甘 、 2 
Ei 龙井 其 村 。 大 佛 龙 并 、 钱 墙 龙 打 、 
越 州 龙井 四 种 ， ee 其 他 产地 产 的 
上 3 俗称 为 浙江 龙井 茶 。zhejiangjonaj 








用 户 也 可 以 在 [代码 视图 ] 中 相关 的 XHTML 
标签 中 输入 字符 ， 同 样 可 以 将 其 添加 到 网 
页 中 。 


2. 粘贴 外 部 文本 

在 编辑 网 页 内 容 时 ， 对 于 篇 幅 比较 长 的 文本 . 
则 可 以 直接 将 外 部 文本 复制 到 【设计 】 视 图 中 。 例 
如 ， 在 某 个 网 页 中 复制 一 段 文本 . 切换 到 
Dreamweaver 文档 中 ,执行 【粘贴 命令 或 按 CtrlHV 
组 合 键 ， 即 可 粘贴 该 文本 。 


























网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 : 


】〗 按 钮 来 





出 现在 浏览 器 中 。 
口 透 了 明度。 用 于 设置 跟踪 图 像 的 透明 度 ， 从 
完全 透明 到 完全 不 透明 。 





设置 网 页 文本 


但 是 在 粘贴 外 部 文本 时 .普通 的 粘贴 方法 会 连 
同 外 部 文本 的 格式 设置 一 起 粘贴 过 来 。 此 时 , 用 户 
可 以 在 复制 外 部 文本 之 后 ,执行 【编辑 】|【 选 择 


















性 粘贴 ] 命令 , 在 弹出 的 【选择 性 粘贴 】 对 话 框 中 ， 
选择 所 需 粘贴 的 文本 样式 , 单 击 【 确 定 】 按 钮 即 可 。 
WS - 
a 确定 @@ | 
构 的 文本 《段落 、 列 表 、 来 格 等 ) (S) 取消 @) 
构 的 文本 以 及 基本 格式 ( 粗 体 、 们 体 ) (B) 0 
口 带 结构 的 文本 以 及 全 部 格式 《 碍 体 、 笠 体 、 样 式 ) (了 ) 


保留 换行 符 全 ) 
清理 Yord 段落 间距 (L) 
口 将 智 驼 引号 转 摘 为 直 引 号 (9) 


粘贴 首 这 手数 () 








在 【选择 性 粘贴 】 对 话 框 中 ， 主要 包括 下 列 








岸 


口 仅 文本 
体格 式 。 

口 带 结构 的 文本 ”粘贴 包含 段落 、 列 表 和 表 
格 等 结构 的 文本 。 

口 带 结构 的 文本 以 及 基本 格式 ”粘贴 包含 
段落 、 列 表 、 表 格 以 及 粗 体 和 斜体 的 文本 。 

口 带 结构 的 文本 以 及 全 部 格式 ”粘贴 包含 
段落 、 列 表 、 表 格 以 及 粗 体 、 斜 体 和 色彩 
等 所 有 样式 的 文本 。 

口 保留 换行 符 ” 启 用 该 复 选 框 ,在 粘贴 文本 
时 将 自动 添加 换行 符号 。 

口 清理 Word 段落 间距 ”启用 该 复 选 枉 ， 在 
复制 Word 文本 后 将 自动 清除 段落 间距 。 

口 将 智能 引号 转换 为 直 引 号 ”启用 该 复 选 
框 ， 在 粘贴 文本 时 会 自动 将 智能 引号 转换 
为 直 引 号 。 


仅 粘 贴 文本 字符 ， 不 保留 任何 字 


口 粘贴 首选 参数 。” 单 击 该 按钮 ， 可 以 在 弹出 
的 【首选 项 〗 对 话 框 中 设置 粘贴 首选 项 。 
3. 导入 外 部 文本 
Dreamweaver 为 用 户 提 供 了 导入 外 部 文本 功 
能 ,使 用 该 功能 可 以 导入 Word 文档 。 
在 【代码 和 设计 】 视 图 中 . 将 光标 定位 到 导入 
文本 的 位 置 , 执行 【文件 】|【 导 入】| 【Word 文档 】 


全 
命令 。 
































P= 





然后 , 在 弹出 的 【导入 Word 文档 】 对 话 框 中 
选择 所 需要 导入 的 Word 文档 , 单 击 【 打 开 ]】 按钮 。 


次 拓 用 1) [加 二 








区 本 、 结 构 、 基 本 村 式 【得体 、 半 村 
团 者 Nord 月 甘 5(C) 


7.3.2 ”设置 文本 属性 


当 用 户 输入 . 粘贴 或 导入 文本 到 网 页 文档 中 之 
后 , 还 需要 在 【属性 】 面 板 中 设置 文本 的 HIML 
和 CSS 属性 。 
1. 设置 HMTL 属性 

在 【属性 】 面 板 中 . 打开 HTML 选项 卡 . 将 
各 项 属性 设置 应 用 到 页 面 正文 的 HIML 代码 中 。 














第 7 章 设置 网 页 文本 


| 式 @) | 无 v| 


类 | 天 | BT 洛 所 关 所 标 是) [| 
nD) 无 v， 基 接 ID vO 上 0) 


文 机 标题 无 标 蜂 文 簿 | 页 届 性 】 直上 

















在 HTML 选项 卡 中 ,主要 包括 下 列 15 个 属性 。 
口 格式 ”用 于 设置 文本 的 基本 格式 ， 可 选择 
无 格式 文本 、 段 落 或 各 种 标题 文本 。 

口 类 为 CSS 类 ,用 于 定义 当前 文档 所 应 用 





的 CSS 类 名 称 。 

口 粗 体 用 于 定义 以 HIML 的 方式 将 文本 
加 粗 。 

口 斜体 用 于 定义 以 HTML 的 方式 使 文本 
倾 针 。 

口 项 目 列表 为 普通 文本 或 标题 、 段 落 文本 
应 用 项 目 列表 。 

口 编号 列表 为 普通 文本 或 标题 、 段 落 文本 
应 用 编号 列表 。 

口 删除 内 缩 区 块 ” 将 选择 的 文本 向 左 侧 扒 
移 一 个 制 表 位 。 

口 内 缩 区 块 ”将 选择 的 文本 向 右 侧 推移 一 
个 制 表 位 。 

口 标题 ”当选 择 的 文本 为 超 链接 时 ， 定 义 当 


鼠标 滑 过 该 段 文本 时 显示 的 工具 提示 

口 DD 定义 当前 选择 的 文本 所 属 的 标签 ID 
属性 ,从 而 通过 脚本 或 CSS 样式 表 对 其 进 
行 调用 ， 添 加 行为 或 定义 样式 。 

口 链接 创建 所 选 文本 的 超 文本 链接 。 

口 目标 指定 将 链接 文档 加 载 到 哪个 框架 
或 窗口 。 

口 文档 标题 ”用 于 显示 新 建文 档 的 标题 。 

口 页 面 属性 单 击 该 按钮 ， 可 打开 【页 面 属 
性 〗】 对 话 框 ， 定 义 整个 文档 的 属性 。 

口 列表 项 目 当选 择 的 文本 为 项 目 列表 或 
编号 列表 时 ， 可 通过 该 按钮 定义 列表 的 
样式 。 

2. 设置 CSS 属性 
在 【属性 】 面 板 中 . 打开 CSS 选项 卡 ， 将 各 
项 属性 设置 写 入 文档 头 或 单独 的 样式 表 中 。 
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CSS 选项 卡 中 ， 主 要 包括 下 列 一 些 属性 。 

口 目标 规则 显示 在 CSS 属性 检查 器 中 正 
在 编辑 的 规则 ， 用 户 也 可 以 单 击 下 拉 按 钮 
在 弹出 的 菜单 中 创建 新 的 CSS 规则 、 新 的 
内 联 样式 或 将 现 有 类 应 用 于 所 选 文 本 

口 编辑 规则 单 击 该 按钮 ,可 在 打开 的 【CSS 
设计 器 】 面 板 中 编辑 CSS 规则 。 

口 CSS Designer 单 击 该 按钮 ,可 打开 【CSS 
设计 器 】 面 板 。 

口 字体 用 于 设置 目标 规则 中 的 字体 样式 。 

口 大 小 用 于 设置 目标 规则 中 的 字体 大 小 。 

口 文本 颜色 用 于 设置 目标 规则 中 的 字体 
颜色 。 

口 对 齐 方式 ”用 于 设置 目标 规则 中 文本 的 
对 齐 属性 ， 包 括 左 对 齐 、 右 对 齐 、 居 中 对 
齐 和 两 端 对 齐 4 种 样式 。 

口 文档 标题 ”用 于 显示 新 建文 档 的 标题 。 

口 页 面 属性 单 击 该 按钮 ， 可 打开 【页 面 属 
性 】〗 对 话 框 ， 定 义 整 个 文档 的 属性 。 


7.3.3 ”插入 特殊 文本 


在 网 页 中 除了 可 以 插入 普通 文本 之 外 ,还 可 以 
插入 一 些 比较 特殊 的 文本 。 例 如 ， 插入 特殊 符号 、 
水 平 线 、 日 期 等 。 

1. 插入 特殊 符号 

选择 插入 位 置 , 执行 【插入 】[IHIML| 【字符 】 命 

令 ， 在 展开 的 级 联 菜单 中 选择 相应 的 字符 样式 即 可 。 


lL) 






mm mm 
了 可 以 手动 输入 网 页 文 


Co | 
sa 











Dreamweaver 允许 为 网 页 文档 插入 11 种 基本 
的 特殊 符号 ， 其 每 种 特殊 符号 的 具体 作用 如 下 表 
所 述 。 











除了 上 述 12 种 特殊 符号 之 外 ,用户 还 可 以 执 
行 【插入 】|HTML| 【字符 】|【 其 他 字符 】 命 令 ， 
选择 所 需 插 入 的 符号 ， 单 击 【 确 定 】 按 钮 即 可 。 
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用 户 也 可 以 在 【插入 】 面 板 中 的 HIML 类 别 


中 ， 单 击 【字符 】〗】 下 拉 按 钮 ， 在 其 下 拉 列表 
中 选择 所 需 插 入 的 特殊 字符 即 可 。 





2. 插入 水 平 线 

Dreamweaver 还 为 用 户 提 供 了 插入 水 平 线 功 
能 ,运用 该 功能 可 以 方便 地 插入 水 平 线 。 

首先 . 将 光标 定位 在 需要 插入 水 平 线 的 位 置 。 
然后 ,执行 【插入 】IHIMLI【 水 平 线 】 命 令 ， 即 





可 在 光标 定位 处 插入 一 条 水 平 线 。 
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用 户 也 可 以 在 【插入 】〗 面 板 中 的 【HTML】 
类 别 中 ， 单 击 【 水 平 线 〗 按 钮 ， 即 可 在 光标 
处 插入 一 条 水 平 线 。 





插入 水 平 线 之 后 , 在 【属性 】 面 板 中 将 会 显示 
水 平 线 的 各 种 属性 选项 , 以 方便 用 户 根据 实际 使 用 
来 制作 一 些 相对 优美 的 水 平 线 。 


水 平 线 。 宽 人 ) 


高 00) 





在 【属性 】 面 板 中 , 主要 包括 下 列 4 种 属性 选项 。 

口 水 平 线 用 于 设置 水 平 线 的 ID。 

口 宽 /高 用 于 设置 水 平 线 的 宽度 和 高 度 ， 
单位 可 以 是 像素 或 百分比 。 

口 对 齐 ”用 于 设置 水 平 线 的 对 齐 方式 ， 包 括 
默认 、 左 对 齐 、 居 中 对 齐 和 右 对 齐 。 

口 阴影 启用 该 复 选 框 ， 可 为 水 平 线 添加 阴 
影 效 果 。 
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设置 水 平 线 的 宽度 为 1， 然后 设置 其 高 度 为 


较 大 的 值 ， 可 得 到 垂直 线 。 





3. 插入 日 期 

用 户 不 仅 可 以 在 网 页 中 插入 水 平 线 和 特殊 符 
号 .而且 还 可 以 插入 当前 时 间 和 日 期 。 

执行 【插入 】IHITMLI【 日 期 】 命 令 ， 在 弹出 
的 【插入 日 期 】 对 话 框 中 ， 设 置 日 期 和 时 间 选 项 ， 
单 击 【 确 定 】 按 钮 即 可 。 























时 其 格式: [[ 趟 要 星期 加 [确定 | 
日 期 格式 : [737377 一 pF [取消 | 
03/07/1974 [帮助 | 
3/7/74 
1974-03-07 
7/3/74 ~ 
时 间 格式 : [不 要 时 间 ] vx] 
| 储存 时 自动 更 新 
































在 【插入 日 期 】 对 话 框 中 ， 主 要 包括 下 列 4 
个 选项 。 

口 星期 格式 ”用 于 设置 中 文 或 英文 样式 的 
星期 显示 格式 ， 也 可 以 设置 为 不 显示 
样式 。 

口 日 期 格式 ”用 于 设置 日 期 显示 格式 。 

口 时 间 格 式 ” 用 于 设置 时 间 显 示 格 式 。 

口 存储 时 自动 更 新 启用 该 复 选 框 ， 可 以 在 
每 次 保存 网 页 文档 时 都 会 自动 更 新 插入 
的 日 期 时 间 。 
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列表 是 网 页 中 常见 的 一 种 文本 排列 方式 . 包括 
项 目 列表 和 项 目 编号 两 种 样式 。 通 过 设置 文档 列 
表 . 不 仅 可 以 美化 页 面 . 而 且 还 可 以 突显 出 文本 的 
层次 性 。 








7.4.1 项 目 列表 与 编号 


在 Dreamweaver 中 .除了 可 以 通过 HTML 语 
言 来 创建 项 目 列表 与 编号 之 外 .还 可 以 使 用 [设计 】 
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视图 ， 以 直观 表达 的 方法 来 创建 项 目 列表 和 编号 。 
1. 通过 【插入 】 面 板 创建 

在 网 页 中 ,选择 所 需 创 建 项 目 列表 与 编号 的 文 
本 。 然 后 ,在 【插入 】 面 板 中 . 选择 HTML 类 别 . 
在 其 列表 中 单 击 【 项 目 列表 】 按 钮 . 即 可 为 所 选 文 
本 添加 项 目 列表 。 


























另外 , 在 网 页 中 , 选择 所 需 创 建 项 目 列表 与 编 
号 的 文本 。 然 后 , 在 【插入 】 面 板 中 , 选择 HTML 
类 别 , 在 其 列表 中 单 击 【编号 列表 】 按 钮 , 即 可 为 
所 选 文本 添加 编号 。 


本 








| 


me Ts es 
EE 






5s 日 四 上 里 日 加 











ER 





用 户 也 可 以 直接 单 击 【 项 目 列表 】〗 或 【编号 
列表 】 按 钮 ， 输 入 完 一 个 列表 项 之 后 ， 按 下 
回 车 键 ， 系 统 会 自动 显示 下 一 个 列表 项 。 完 
成 输入 之 后 ， 连 续 按 两 次 回 车 键 ， 结 束 列 表 
的 输入 。 


2. 通过 【属性 】 面 板 创建 
在 网 页 中 ,选择 所 需 创建 项 目 列表 与 编号 的 文 
本 。 然 后 ,在 【属性 】 面 板 中 的 HTML 选项 卡 中 

















单 击 【 项 目 列表 】 或 【编号 列表 】 按 钮 . 即 可 为 所 
选 文本 添加 项 目 列表 或 编号 列表 。 


EE EID 寻 
了 PR PP PR FPP, PN PR] 














Dreamweaver 只 能 以 段落 文本 转换 列表 。 在 
一 个 段落 中 的 多 行内 容 在 转换 列表 时 只 会 
转换 到 同一 个 列表 项 目 中 。 


7.4.2 ” 赃 套 项 目 列表 


谋 套 项 目 列表 是 在 一 个 项 目 列表 中 嵌入 一 个 
或 多 个 项 目 列表 . 以 形成 上 下 级 关系 ,一 般 情况 下 ， 
用 户 可 通过 下 列 两 种 方法 .来 创建 谋 套 项 目 列表 。 
1. 列表 项 法 

首先 .为 所 选 文 本 添加 项 目 列表 。 然后 . 在 【 拆 
分 】 视 图 中 的 左 侧 【代码 】 视 图 中 ,将 光标 定位 在 
<ul></ul> 标 签 内 所 需 显 示 或 插入 伐 套 列表 的 位 置 , 
并 在 【插入 】 面 板 中 单 击 【编号 列表 】 按 钮 。 


























LS tle 
1 eldoctype htnl> 
<htnl> 


<head> 


几米 加 


4 cmeta charset="Utf-8"> 
<title> 无 标题 文档 </title> 


En 


[a 


| 四 怠 避 各 加 




















四 
百 





最 后 . 在 【插入 】 面 板 中 . 单 击 【 列 表 项 】 按 
钮 .添加 文本 内 容 后 即 可 实现 谋 套 列表 。 











WN ld 

















0 I @. im 





2. 缩 进 法 

首先 , 在 【设计 】 视 图 中 ,为 所 选 文本 添加 项 
目 列表 。 然 后, 选择 需要 府 套 列表 的 文本 . 在 【 属 
性 】 面 板 中 单 击 【 缩 进 】 按 钮 即 可 。 
] WE 2 [EID ba 


























CS 
《yna] | 情 式 0) 无 
本 cs I(t) 元 


六 档 标 是 无 人 是 档 























创建 庶 套 列表 之 后 ， 选 择 谋 套 列表 文本 ， 单 


击 【 属 性 】〗 面 板 中 的 【编号 列表 】〗 按 钮 ， 即 
可 更 改 列表 样式 。 
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7.4.3 设置 列表 属性 


创建 列表 后 . 用 户 还 可 以 根据 设计 需求 设置 列 
表 的 一 些 常规 属性 。 
选择 包含 列表 的 文本 , 在 【属性 】 面 板 中 单 击 
【列表 项 目 】 按 钮 ， 即 可 在 弹出 的 【列表 属性 】 对 
话 框 中 .设置 列表 的 基本 属性 。 
在 【列表 属性 】 对 话 框 中 .主要 包括 下 列 5 
个 选项 。 
口 列表 类 型 ”用 于 指定 列表 的 类 型 ， 包 括 项 
目 列表 、 编 号 列表 、 目 录 列 表 和 菜单 列表 
4 种 类 型 。 
口 样式 用 于 指定 编号 列表 或 项 目 列表 的 
编号 或 项 目 符号 的 样式 。 








列表 类 型 (T): | 编号 列表 v 
样式 (S): | 数字 (1, 2, 3...) v| 
开始 计数 (C) | (数字 ) 
列表 项 目 
新 建 样式 (0) : | 大写 罗 马 字母 (I : v 
重 设计 数 (R) 




















| 数字) 








口 开始 计数 用 于 设置 编号 列表 中 第 一 个 
项 目的 值 。 

口 新 建 样式 “为 所 选 列 表 项 目 指定 样式 。 

口 重 设计 数 ”设置 用 来 从 其 开始 为 列表 项 
目 编号 的 特定 数字 。 





对 于 网 页 中 的 文本 . 除了 通过 【属性 】 面 板 设 
置 基本 格式 之 外 . 还 可 以 通过 HTML 样式 、 段 落 
样式 等 功能 . 来 设置 文本 格式 . 从 而 使 页 面 内 容 更 
佳美 观 、 更 具有 层次 感 。 


7.5.1 设置 HTML 样式 


HTML 样式 是 HIML 4 引入 的 ， 它 是 一 种 新 
的 首选 的 改变 HIML 元 素 样式 的 方式 .通过 HIML 








样式 ， 可 以 通过 使 用 style 属性 直接 将 样式 添加 到 
HTML 元 素 . 或 者 间接 地 在 独立 的 样式 表 中 (CSS 
文件 ) 进行 定义 。 


1. 下 划 线 
<u><h> 下 划 线 标签 告诉 浏览 器 把 其 加 <u> 标 


签 的 文本 以 加 下 划 线 样式 呈现 给 用 户 。 对 于 所 有 浏 
览 器 来 说 . 这 意味 着 要 把 这 段 文 字 加 下 划 线 样式 方 


式 显 示 。 
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选择 网 页 文本 . 执行 【格式 】| 【HTML 样式 】 
1 【下 划 线 】 命 令 . 


即 可 为 所 选 文本 添加 下 划 线 




















2. 删除 线 

<s></s> 标 签 为 删除 线 标签 告诉 浏览 器 把 其 加 
<s> 标 签 的 文本 文字 以 加 删除 划 线 样式 (文字 中 间 
一 道 横 线 ) 呈现 给 用 户 。 

选择 网 页 文本 , 执行 【格式 】| [HTML 样式 】 
|【 删 除 线 】 命 令 ， 即 可 为 所 选 文本 添加 删除 线 
样式 。 










从 | 时 者 局 


Ee Mn) 
ss5xgs 日 z 。 








iE 从 
E 
E 
本 
日 
折 
E 





3. 粗 体 

<strong> 标 签 用 于 强调 文本 ,但 它 强 调 的 程度 
更 强 一 些 。 通常 是 用 加 粗 的 字体 (相对 于 斜体 ) 来 
显示 其 中 的 内 容 。 

选择 网 页 文本 . 执行 【格式 】| 【HTML 样式 】 
| 【 粗 体 】 命 令 ， 即 可 为 所 选 文本 添加 粗 体 样式 。 
























Dw mw. CH -ol * 
(VW mAM MAW 0))] estO wat) Nw ww 











<em></em> 标 签 告诉 浏览 器 把 其 中 的 文本 表 
示 为 强调 的 内 容 。 对 于 所 有 浏览 器 来 说 , 这 意味 着 
要 把 这 段 文字 用 斜体 方式 呈现 给 大 家 显示 , 这 个 与 
html 斜体 效果 相同 。 

选择 网 页 文本 . 执行 【格式 】| 【HTML 样式 】 
| 【斜体 】 命 令 ， 即 可 为 所 选 文 本 添加 和 斜体 样式 。 























Fl 由 & 加 而 = 


| 
| 
E 
# 





7.5.2 ”设置 段落 样式 

Dreamweaver 中 段落 样式 只 设置 标题 内 容 . 包 
括 “标题 1 、“ 标 题 2 、“ 标 题 3”...“ 标 题 6” 等 
样式 . 既 可 以 应 用 于 文本 段落 .又 可 以 应 用 于 标题 。 
1. 设置 段落 

将 光标 定位 在 空白 网 页 中 , 执行 【格式 】|【 段 
落 格式 】| 【段落 】 命 令 ， 系统 会 在 【代码 】 编 辑 
器 中 添加 一 个 <p> 标 签 。 





eee 
eeee 
四 日 
ee 

















Dw m-. Eh -o> 
六 从 ( 明 、 驴 (F) 查看 IV) 括 和 II 修改 (M) 【0 #0 a(9 gn) sm 








选择 包含 段落 格式 的 文本 ,执行 【格式 〗| 
【段落 格式 】|【 无 】 命 令 ， 即 可 取消 段落 
样式 。 


另外 ， 选 择 网 页 文本 ,执行 【格式 】| 【段落 
格式 】〗| 【上 段落】 命令 ， 即 可 为 所 选择 内 容 添加 段 
落 标签 。 

















EE 











El rERDHo UT 


CH 





2. 设置 标题 

标题 是 文章 的 眉目 。 各 类 文章 的 标题 . 样式 繁 
多 , 但 无 论 是 何 种 形式 . 总 要 以 全 部 或 不 同 的 侧面 
体现 作者 的 写作 意图 、 文章 的 主旨 。 标题 一 般 分 为 
总 标题 、 副 标题 、 分 标题 等 几 种 。 

因此 ,在 Dreamweaver 中 ， 标题 可 以 分 为 6 
个 级 别 . 不 同 级 别 的 标题 的 格式 不 相同 . 而 “标题 
1” 为 最 大 字号 、“ 标 题 6” 为 最 小 字号 。 

选择 网 页 文本 . 执行 【格式 】| 【段落 格式 】| 
【标题 1】 命 令 ， 即 可 为 所 选择 内 容 添加 “标题 1” 
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Dw Ce 




















除 此 之 外 , 用户 还 可 以 将 文本 设置 为 其 他 的 标 
题 , 如 “标题 2"、“ 标 题 3”"、“ 标 题 4” 等 。 

3. 编排 格式 

<pre> 标 签 可 定义 预 格式 化 的 文本 ， 被 包围 在 
<pre> 标 签 中 的 文本 通常 会 保留 空格 和 换行 符 ， 而 
文本 也 会 呈现 为 等 宽 字体 ，<pre> 标 签 的 一 个 常见 
应 用 就 是 用 来 表示 计算 机 的 源 代码 。 

在 代码 中 ,可 以 导致 段落 断 开 的 标签 (如 标题 、 
<p> 和 <address> 标 签 ) 绝 不 能 包含 在 <pre> 标 签 所 
定义 的 块 里 。 尽管 有 些 浏览 嚣 会 把 段落 结束 标签 解 
释 为 简单 的 换行 . 但 是 这 种 行为 在 所 有 浏览 器 上 并 
不 都 是 一 样 的 。 

<pre> 标 签 中 允许 的 文本 可 以 包括 物理 样式 和 
基于 内 容 的 样式 变化 , 还 有 链接 、 图 像 和 水 平分 隔 
线 。 当 把 其 他 标签 (例如 <a> 标 签 ) 放 到 <pre> 标 签 
块 中 时 ， 就 像 放 在 HTML/XHTML 文档 的 其 他 部 
分 中 一 样 即 可 。 

例如 ， 选 择 网 页 文本 ,执行 【格式 】| 【段落 
格式 】| 【已 编排 格式 】 命 令 。 然 后 在 <pre> 标 签 中 ， 
对 文本 进行 换行 ， 并 插入 空格 ， 以 测试 显示 效果 。 
































meta charset=nut 和 痢 
5 te eee, 





三 名 
豆 、 叶 经 束 ， 纵 咎 要" 答 也 人 9 其它 关上 H 入 ， 营养 主 富 ， 


调整 后 的 文本 格式 . 可 以 在 浏 
内 容 。 以 查看 最 新 效果 。 


览 器 中 浏览 网 页 
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1.6 


在 制作 诗词 页 面 中 ， 
如 标题 、 段 落 等 。 




















户 对 文本 内 容 可 以 进 





基础 工具 的 使 用 方法 。 


行 一 些 格式 设置 ， 
并 且 , 用户 在 录入 文本 时 ,需要 插入 特殊 字符 。 
在 本 练习 中 , 将 通过 制作 《送别 》 诗 词 ,来 详细 介绍 Dreamweaver 


页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 


练习 : 制作 诗词 欣赏 页 


新 建文 档 
插入 页 忆 
插入 标题 





《送别 》 


作者 ， 王 维 
下 马 饮 妖 酒 ， 问 轿 何 所 之 ? 
轩 言 不 得 意 ， 归 卧 商 山 奈 。 
但 去 黄 复 问 ， 和 白云 无 尽 时 。 
[注解 
四 议 加 酒 : 劝 如 喝酒 
名 何 所 之 : 去 那里 人 
多 归 卧 + 隐居 
全 南山 降 : 终 南 山 边 。 
【 韵 译 3 


请 你 下 马 喝 一 杯 间 湘 ， 我 
你 说 因为 不 甚 得 志 ， 要 到 
只 管 去 吧 ， 我 不 再 多 问 ， 


评析】 


he 却 是 词 洲 人 
是 





操作 步骤 “>》2>》 
STEP|01 启动 Dreamweaver， 在 欢迎 界面 中 选择 
个 空白 页 面 。 





【HTML】 选项， 创建 一 








STEP102 然后 ,在 页 面 下 方 的 【属性 】 面 板 中 . 
单 击 【页 面 属性 】 按 钮 。 











插入 文章 
插入 格式 
保存 文档 











Ti 无 v 
诡 档 标题 | 无 标 是 文档 















STEP|03 在 弹出 的 【页 面 属性 】 对 话 框 中 的 【外 











观 (CSS)】? 选 项 卡 中 ,设置 页 面 的 背景 颜色 。 
Pe | 
| 二 外观 fcss) 
| De sms) [D7 > v @ 
) 设 置 
I i 
文本 所 (7) 辕 | 
0 
背景 图 像 (1) 浏览 (WW. 
重复 (2) ~ 
记过 更 o 到 jb 攻 
下 边 距 (0) px 
| | Gr "ss 了 1 Cm | 
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STEPI04 在 [代码 ] 祝 图 中 .将 光标 定位 于 <body> ”STEPI08 在 <h1> 标 签 之 后 ,再 插入 <h3></h3> 标 
标签 之 后 . 并 按 回 车 键 。 然 后 . 执行 【插入 】| 【页 息 


人 局 。 















眉 】 命 令 
mp 立 。 
工 “ldoctype html> 
2 <htnt> 
3 <head> ， a background-color: smaFCFL; 
4 <meta charset="utf-a"> a 9 } 


</style> 
</heod> 





5 <title> 无 标 /title> 
6 <style type="text/css"> 








7 body { 
a background-color: #B4ECFL; cutkaT 

3 3 

/nes -i 

了 3 
[nm | 

14 上 于 二 人 
5 Kbody> STEPI09 将 光标 定位 于 </h3> 标 签 之 后 ， 并 执行 
16 ‘1 

7 名 定位 





【插入 】| 【文章 】 命 令 。 


type html> 











STEP|05 在 弹出 的 【插入 Header】 对 话 框 中 , 单 
击 【 确 定 】 按 钮 。 此 时 ， 在 代码 中 将 插入 
<header></header> 标 签 。 





搬入 [在 括 入 点 


Cr | 


Io: | v 
LM css 规则 | 





STEP|10 在 弹出 的 【插入 Article】 对 话 框 中 , 单 
击 【 确 定 】 按 钮 ， 即 可 在 文档 中 添加 该 标签 。 











STEP|06 执行 【插入 】| 【标题 】| 【标题 1] 命令 ， 
并 插入 <h1></h1> 标 签 。 











播 入 : [在 插入 点 四 





CtritAlttl 


3 <head> Ciassl vv 

4 <neta 

5 <title :| 加 
style cs 

body Mk cs my] 

a bal 

9 } 

18 </styU 

11 </head| 


STEP|11 将 光标 定位 于 <article></article> 标 签 中 ,并 





国 ow 
Seo, 执行 【格式 】| 【段落 格式 】| 【已 编排 格式 ]】 命令 。 
























| 午 进 (0D Cul+Ah+] J 
- | di(O) Si 加 人 ae 
STEPI07 在 <hl> 标 签 中 ， 用 户 可 以 输入 诗词 的 mm ， coh 
colt 
2 Ctrl+4 





Colt5 





syle tpesrtEXEJc5S 司 1 
7 body { 1 > cu 

a background-color: #4ECF1; 12 

9 } 13 > il 
18 </style> 1 

1 </head> 国 :arueue 


16 </header> 
17 </body> 


13 body> 
| = En-neescr Ia /htnl> 











; 二 STEp|12 在 <pre></pre> 标 签 中 ,录入 诗词 的 内 容 。 
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1 crooctype NEN 可 
<htnt> 





ss55e 上 sss 


STEPI13 将 光标 定位 于 </pre> 标 签 的 后 面 ， 执 





【插入 】[IHTML| 【章节 


节 】 命 令 。 





Tcrype mamr 
<htmt> 

<head> 

cmeta charset="utf-8"> 
ctitte> 无 标题 文档 </eitte> 


styte type-"text, 








background-color: 884ECFL 
zjstytey 


s/head> 


<body> 
<header> <h1> 放 别 》 </hl><h3> 作 看 
ree mre 


通天 
由 ,上 白 云 无 尽 时 。 
</fpr 寻 /articte> 


STEP|14 在 弹出 的 【插入 Section】 对 话 框 中 . 
击 【 确 定 】 按 钮 ， 即 可 在 文档 中 添加 该 标签 。 

















雪人: | 在 
class 下 
器 





CS mA 





STEP|15 在 <section> </section> 标 签 中 ， 
本 内 容 。 


Ta 








? 
如 二 大 ， 扫 引 南 [ 短 。 
但 去 页 复 站, 白云 无 8。 





</header> 
</body> 
</htnl> 


11 





练习 : 


Dreamweaver 具有 强大 的 文本 编辑 能 力 ， 可 以 帮助 











STEP|16 然后 . 在 </section> 标 签 后 
节 内 容 . Se 


面 添加 其 他 章 


<Jpres</section> A 


<aection>ch5>【 询 于 </hs> 






下 再 多 问 ， 那 白云 没有 方 尽 
</pre> 

</section> 
<section><h5>【 评 析 】</hs> 








;看 似 语 名 平淡 无 冶 ， 
二 到 


</pre> 
</section> 
<Jarticte> 
</hearer> 站 











STEP|17 紧 接 着 , 修改 <tile></tide> 标 签 中 的 网 页 
标题 名 称 。 


laoctype RD | 
chtnl> 
<head> 


et utf 
I -eu /ttre 


style oo tart/css” 
vody { 
ba decp 
输入 
/styles 


</head> 








<body> 
<header><h1>< 遂 别 》</h1><ha> 作 者 : 王 维 </ha> 





人 
a > Tt /mes "| 


STEP|18 执行 【文件 】| 【保存 】 命 令 ， 在 弹出 的 
【另存 为 】 对 话 框 中 ,设置 保存 名 称 和 位 置 ， 单 
【保存 】 按 钮 。 








种 








ET rr 
GT: A Decemere (Cher hk chtme chm 


or emappcache 


Unicode 于 大 











制作 班级 管理 制度 




















户 制作 
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第 7 章 设置 网 页 文本 





出 界面 优美 的 文本 网 页 。 在 本 练习 中 ， 将 通过 制作 班级 管理 制度 
网 页 ， 来 详细 介绍 新 建 网 页 文档 、 设 置 网 页 及 文本 属性 等 网 页 编 





辑 操作 方法 。 新 建 网 页 
加 设置 页 面 属性 
班级 管理 制度 A 
(一 ) 班 干部 职责 设置 段落 格式 
班长 : 负责 班级 全 面 工作 。 每 月 召开 一 次 班 委 会 ， 制 订 工 作 计划 草案 。 做 好 班 委 会 评议 记录 。 对 齐 文本 


副 班长 协助 班长 做 好 工作 ， 知 好 课室 考勤 工作 和 学 校 以 及 学 院 活动 的 考勤 。 插入 结构 


学 习 委 员 ， 负 责 沟通 师 生 之 间 的 信息 交流 ， 向 有 关 部 门 反 遇 学 生 对 教学 的 意见 ， 组 织 六 级 学 生 平 线 
开展 有 区 池 习 居 币 基 相生 i 插入 水 平 线 


下 负责 学 生 的 后 勤 工 作 ， 协 助 班主 任 处 理 班级 生活 事务 ， 发 生 情 读 主动 与 相关 老师 联 





劳动 秀 员 ， 负 责 班级 责任 区 集 休 劳动 的 安排 及 监察 并 及 时 反馈 信息 
体育 委员 ， 负 责 开展 经 常 性 的 体育 活动 及 组 织 参加 各 种 体育 比赛 。 组 建 并 管理 编辑 体育 队伍 。 
文 媒 委员 ， 负 责 开 展 班 级 的 文艺 活动 ， 丰 富 课余 生活 。 (文娱 委员 每 学 期 必须 组 织 一 次 班级 文 






















































过 活动 Y» 
操作 步骤 >> 性 
STEP|01 启动 Dreamweaver， 在 欢迎 界面 中 选择 | 让 Hh (eno) 
| 页 面 字体 和) v ~ v 
HTML 选项 ， 创 建 一 个 空白 页 面 。 | x bE 
文本 黄色 4r)， 加 | ¥ 
wana EI) 
背景 图 像 () 浏览 () 
重复 人) v| 
bo 下 右边 距 ( 区 
Ss 太 ER 下 过 距 (o) w 
| | | 证 有 WW | 
ba DD 
wn 而 而 必 性 Ea 
分类 村 县 / 壤 码 
全 memspanson 您 标题) 
全 让 HR 殿 村 himl ep， A 文档 类型 (DTD) : NOUS5 v 
Er 坊 风 (1) | 
机 活 ] we 标 生化 表单 (): | (向 GIRT ER 抽 元 各所) 
STEPI02 然后 ,在 页 面 下 方 的 【属性 】 面 板 中 . 0 
单 击 【页 面 属性 】 按钮 。 站 点 文件 夫 : 0; VsitesVeompany\ 
0 | [ET 


















v BI 洛 摇 壮 关 标量 
YQ 和 ”国生 
列表 项 目 





STEP|05 切换 到 【设计 】 视 图 中 . 复制 已 编辑 好 
的 “班级 管理 制度 ”文本 。 

















STEP|03 在 弹出 的 【页 面 属性 】 对 话 框 中 的 【外 
观 (CSS)】 选 项 卡 中 ,设置 页 面 的 背景 颜色 。 
STEP|04 打开 【标题 /编码 】 选 项 卡 ， 在 【标题 】 
文本 框 中 输入 网 页 的 标题 文本 ， 并 单 击 【确定 】 
按钮 。 






机 和 
和 多 
rs 


后 芭 工 作 ， 革 册 汉 王储 处 理 站 六 生活 事务 ， 发 和 入 澡 主 
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网 页 制作 与 网 ? (CC 2015 中 文 版 ) 从 新 手 到 高 手 





STEP|06 选择 全 部 文本 内 容 . 并 执行 【插入 ] IDiv 
命令 ,在 弹出 的 【插入 Div】 对 话 框 中 ， 单 击 【 确 
定 】 按 钮 ， 即 可 将 文本 包含 在 一 个 <div></div> 标 
签 中 。 











打 入 :| 在 迁 定 内 罕 帝 换行 v - 
cus | z LE 
E29] 








STEP|07 选择 标题 名 称 ,执行 【格式 】| 【段落 格 
式 】| 【标题 1】 命 令 ,设置 标题 的 段落 格式 。 


Pt TR En Pn PE EE Pe EE 











HTML OH) 
CS NO | 


活 委员 ， 负 责 学 生 的 后 勘 工 | “时 4 【之 ' 
条 关 尖 喇 联 系 。 | 5 cms 


动 委员 ， 负 责 班级 责任 区 集 | 
4 负责 开展 经 党 性 的 体育 活动 及 组 织 参加 各 种 体育 比赛 。 se 





#6 
BAMHIR) 让 。 

















STEPI08 同时 ,在 【属性 】 面 板 中 , 打开 CSS 选 
项 卡 . 单 击 【 居 中 对 齐 】 按 钮 . 设置 标题 为 居中 显 
示 格 式 。 



















2 协助 班长 做 好 工作 ， 这 者 工作 和 尝 校 以 及 兴 辽 活动 的 才 昌 。 
学 司 要 员 ， 负责 沟通 师 生 之 间 的 信息 交流 ， en 


有 组 如 这 生 开展 和 类 尝 活 玉 和 本 技能 咱 陈 






《>》 D0。 目 权 规 则 《 宁 内 联 桂 式 > vv 字 兴 人 名 时 3 传 v 
[css] | Mi cs mime | | hE) v 
文档 标题 广 加 管 理 可 度 ET 





STEP|09 选择 标题 以 外 的 内 容 , 执行 【插入 】| 
【文章 】 命 令 。 

STEP|10 在 弹出 的 【插入 Article】 对话 框 中 ， 单 
二 【确定 】 按 钮 ， 即 可 在 文档 中 所 选 内 容 外 添加 


和 








外 





页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 





<article></article> 标 签 。 





GultAR+T 





E 
| 
| 
| 
| 
| 
: 
了 











STEPITI 选择 “(一 ) 班 干部 职责 ” 文本, 执行 【 插 
入 】|【 章 节 】 命 令 ， 在 弹出 的 【插入 Section】 对 
话 框 中 单 击 【确定 】 按 钮 。 








插入 | 在 选 定 内 容 帝 换行 v 
Class: [| 加 











STEP|12 同时 ,执行 【格式 】|【 段 落 格式 】|【 标 
题 3】 命令 . 设置 所 选 文本 的 段落 格式 。 














cnrar] 次 班 委 会 ,制订 工 作 计划 草案 。 做 | 








E277) 
|。 em) 
,se 
i 2 
作坊 二 
动 与 相关 者 师 联系 攻 中 





委员 ， 负 责 班级 责任 区 集体 劳 动 仙 。 6 
EE 沐 育 委员 : 让 责 开 展 经 性 的 体育 活动 昌 吕 2 了 于 种 休 有 红 天 -下 于 理 


STEP|13 分 别 选择 该 节 内 容 中 . 每 段 内 容 中 “ 冒 











第 7 章 设置 网 页 文本 


Pr 


号 ”(:) 及 之 前 的 文本 . 在 【属性 】 检 查 器 中 单 击 。 生 课 堂 常规 ”文本 之 间 的 所 有 内 容 , 执行 【 格 式 】 
【加 粗 】 按 钮 .设置 文本 的 加 粗 格式 。 |【 缩 进 】 命 令 ， 缩 进 文 本 。 用 同样 的 方法 ， 缩 进 
其 他 文本 。 
























这 要 只， 负责 沟通 师 生 之 间 的 信息 交流 ， 向 有 关 : 
组 织 班级 学 生 开展 各 类 学 习 突 动 和 基本 技能 训练 








STEPI14 分 别 选择 “二 、 学 a a 
班级 环境 管理 制度 ”等 内 容 .设置 为 章节 内 容 , 并 STEP|16 切换 到 【设计 】 视 图 中 ,将 光标 定位 在 


设置 节 标题 为 “标题 3 标题 文本 后 ,执行 【插入 】IHTML| 【水 平 线 】 命 
令 , 插入 一 条 水 平 线 。 








TR 


宣传 委员 ， 
前 三， 学 生 课堂 常 规 

后 课 前 认真 做 好 上 课 准备 ， 学 习 用 品 要 整齐 云 放 在 刘 桌 指定 的 位 置 . 
2、 听 见 上 课 的 预备 惟 后 ， 尽 快 安 埋 有 秩序 地 进入 教室 ， 在 自己 的 座位 上 稚 保 ; 
赂 教师 上 课 。 教师 走 进 教室 ， 宣 布 上 课 后 ， 班 长 发 出 起 立 口令 ， 师 生 相互 问 
在 未 师 示意 下 ， 学 生 方 可 盆 下 。 

导 3、 壕 到 的 学 生 在 教师 同音 后， 应 轻 手 径 妓 二 进 教室 ， 不 得 妨碍 同学 上 课 。 


司 4、 上 澡 时 ， 精 神 饮 满 ， 坐 小 端正 ， 自 然 插 有 移 ， 两 手 放 在 规定 的 位 置 ， 不 各 上 
1 动作 ， 示 经 志 师 许可 ， 不 能 随便 离开 座位 和 教室 : 


[下 5、 上 课时 要 专心 听讲 ， 积 极 思 者 问题 。 读 书 
用 失 直 夺 学习 六 站， 中 于 提问 是 
同 次 扫兴 手 ， 在 教 恒 指名 后 才能 发 襄 ， 


STEP|15 选择 “( 一 ) 班 干部 职责 ”和 “二 、 学 


| 贡 新 手 训练 营 














到 、 口 到 。 努力 尝 ; 
间 ， 要 按 规 定 的 ; 
音 通 话 ， 声 音 区 远 ; 、 






















































练习 1: 制作 图 像 背景 i EJ 
信 downloads\7\ 新 手 训练 营 \ 图 像 背景 a re i 
提示 ， 本 练习 中 。 首先. 新建 一 个 空白 文档 ,在 三 三 
【属性 】 面 板 中 单 击 【 页 面 属性 】 按 钮 。 然 后 ， 在 弹 有 -全 
出 的 【页 面 属性 】 对 话 框 中 的 【外 观 (CSS)] 文本 杠 ee ES。 ma: 忆 汪 攻 
中 . 单 击 【 背 景 图 像 】 选 项 后 面 的 【浏览 】 按 钮 。 有 























在 弹出 的 【选择 图 像 源 文件 】 对 话 框 中 . 选择 图 | 人 
像 文 件 ， 并 单 击 【 确 定 】 按 钮 。 最 后 . 在 【页 面 属性 】 对 话 框 中 . 将 【重复 】 设 
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置 为 repeat， 单 击 【 确 定 】 按 钮 即 可 。 





过 幸 - 习 全 育 骂 ”。。 户 


避 ~ 面 @ 


v ER 


Sh (css) 
页 面 字体 (D: | 加 默 认 字 伟 
大 小 G) < 


xxmeo[GRKS | 人 


革 景 白色 (3) 


在 过 中 四 mx 有 iW): 
ib (e): [ CE ib 0) mv 


EE 





| Woh) 


练习 2: 使 用 Web 字体 
人 〇 downloads\7\ 新 手 训练 营 \ 使 用 Web 字体 

提示 : 首先 ， 新建 空白 文档 ,执行 【插入 】|Div 
命令 ,在 弹出 的 【插入 Div】 对 话 框 中 , 将 ID 设置 为 
“box”， 并 单 击 【 新 建 CSS 规则 】 按 钮 ， 定 义 Div 标 
签 的 CSS 规则 。 在 Div 标签 中 输入 文本 ， 在 【属性 】 
面板 中 的 HTML 和 CSS 选项 卡 中 ， 分 别 设置 文本 的 
字体 样式 ， 并 在 【代码 】 视 图 中 ， 为 字体 添加 空格 
符号 。 

















然后 ,执行 【修改 】|【 管 理 字体 】 命 令 ， 在 弹 
出 的 【管理 字体 】 对 话 框 中 . 打开 【本 地 Web 字体 】 
选项 卡 。 单 击 【TIF 字体 】 右 侧 的 【浏览 】 按 钮 ， 添 
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加 字体 文件 。 同 时 ,启用 【我 已 经 对 以 上 字体 进行 了 
正确 许可 ,可 以 用 于 网 站 】 复 选 框 并 单 击 【 添 加 】 
按钮 。 


添加 计算 机 中 的 字 件 。 所 添加 字体 将 会 出 现在 Dresmweaver 中 和 9 所 有 字体 列表 中 





| 方正 硕 志 行书 





























有 [ERPeespreomvesve cc 中 文 有 | 








OD 添加 


直 们 了 正确 认可 ， 可 y 





























执行 【窗口 】| 【Css 设计 器 】 命 令 ， 在 打开 的 
【Css 设计 器 】 面 板 中 ， 单 击 【添加 选择 器 】 按 钮 ， 
添加 “.font01” 选 择 器 ， 并 定义 其 字体 样式 。 





最 后 . 选中 所 有 文本 . 在 【属性 】 面 板 中 将 【类 】 
设置 为 font01， 并 在 【实时 】 视 图 中 查看 最 终 效果 。 





注 : 网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 注 : 


练习 3: 制作 数学 试题 网 页 
人 包 downloads\7\ 新 手 训练 营 \ 数 学 试题 网 页 
提示 : 首先 . 新 建 空白 文档 .在 【属性 】 面 板 中 
单 击 【页 面 属性 】 按 钮 . 在 【页 面 属性 】 对 话 框 中 将 
【背景 颜色 】 设 置 为 #D6DBF1。 同 时 . 执行 【插入 】| 
【表格 ]】 命令 , 插入 一 个 4 行 x1 列 的 表格 . 并 设置 表 
格 的 属性 。 




















ET RT 





























然后 ,在 表格 的 第 2 行 单元 格 中 , 插入 一 个 【 行 
数 】 为 7、【 列 】 为 1.【 宽 度 】 为 100%、【 边 框 粗细 】 
为 0、【 单 元 格 间距 】 为 5、【 单 元 格 边 距 】 为 1 的 表 
格 ， 并 逐 行 输入 相应 的 文本 。 

最 后 , 在 表格 的 第 3 行 单元 格 中 , 插入 一 个 表格 
并 设置 其 【 行 】 为 5、【 列 】 为 2、【 宽 】 为 100%、【 边 
框 】 为 0.【 填 充 】 为 5、【 间 距 】 为 1。 然 后 ,在 各 单 
元 格 中 输入 相应 的 文本 并 设置 其 格式 。 
Be di gle me mrp te 


EF 上 如 果 把 一 元 一 次 方程 -3x-1-0 的 两 要 各 加 上 1 作为 一 个 新 一 元 二 次 方程 的 两 根 那 和 
ji 是， 




















(3) 3x2-4e-1-0( 用 公式 洁 ) 


练习 4: 制作 大 学 生 辩 论 赛 页 
人 〇 downloads\7\ 新 手 训练 营 \ 大 学 生 辩 论 赛 页 
提示 : 首先 ,新建 空白 文档 , 执行 【插入 】|Div 
命令 , 在 弹出 的 【插入 Div】 对 话 框 中 , 将 ID 设置 为 
box， 并 单 击 【 新 建 CSS 规则 】 按 钮 ， 定 义 Div 标签 
的 CSS 规则 。 














设置 网 页 文本 


第 7 章 


Pr 





#box { 
background-image: url(11.jpg); 
background-repeat: 
height: 897px; 
width: 1321px; 
margin-top: auto; 
100px; 
margin-bottom: auto; 


no-repeat; 


margin-right: 


margin-left: auto; 
padding-top: 70px; 
padding-right: 70px; 
padding-bottom: 60px; 
padding-left: 


} 


90px; 


然后 , 在 Div 标签 之 间 输入 标题 文本 , 并 设置 文 








本 的 字体 格式 。 同 时 ,在 文本 下 一 行 中 插入 一 个 8 行 x 
1 列 的 表格 ,并 设置 表格 的 属性 。 














TP: PFPA, FPR ,PP 
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大 学 生 辩 论 会 方案 





























图 像 是 网 页 中 必 不 可 少 的 组 成 部 分 . 单纯 的 文本 会 给 人 单调 和 枯燥 的 感觉 , 而 恰当 地 使 用 图 像 可 以 
增加 网 页 的 生动 性 和 说 服 力 。 在 之 前 的 章节 中 ,已 介绍 了 如 何 使 用 Photoshop 处 理 各 种 网 页 图 像 ， 以 及 
制作 切片 网 页 等 知识 。 本 章 将 详细 介绍 图 像 的 插入 、 调 整 和 设置 方法 ， 以 及 其 他 图 像 对 象 的 使 用 方法 和 
应 用 技巧 。 
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添加 图 像 





图 像 是 网 页 中 重要 的 多 媒体 元 素 之 一 . 可 以 弥 
补 纯 文本 的 单调 性 . 增加 网 页 的 多 彩 性 。 但 是 . 过 
多 的 图 像 会 导致 网 页 的 打开 速度 过 慢 . 因此 在 设计 
网 页 时 还 需要 考虑 图 像 的 数目 . 大 小 和 图 形 格式 等 



































8.1.1 网 页 图 像 格式 


网 页 对 图 像 格 式 并 没有 太 严格 的 限制 . 但 由 于 
GIF 和 JPEG 格式 的 图 片 文件 较 小 ， 并 且 许多 浏览 
器 完全 支持 , 因此 它们 是 网 页 制作 中 最 为 常用 的 文 
件 格式 。 一般 情 况 下 , 网 页 中 的 图 像 格式 包括 下 列 
最 常见 的 6 种 。 
1.JPEG (Joint Photographic Experts Group) 
JPEG 是 Web 上 仅 次 于 GIF 的 常用 图 像 格 式 。 
JPEG 是 一 种 压缩 得 非常 紧凑 的 格式 ， 专 门 用 于 不 
含 大 色 块 的 图 像 。JPEG 格式 的 图 像 有 一 定 的 失真 
度 ， 但 是 在 正常 的 损失 下 肉眼 分 辨 不 出 JPEG 和 
GIF 图 像 的 差别 。 而 JPEG 文件 只 有 GIF 文件 的 1/4 
大 小 。JPEG 对 图 标 之 类 的 含 大 色 块 的 图 像 不 是 很 
有 效 ， 不 支持 透明 图 和 动态 图 。 
2. PNG (Portable Network Graphic) 
PNG 格式 是 Web 图 像 中 最 通用 的 格式 。 它 是 
一 种 无 损 压 缩 格式 . 但 是 如 果 没 有 插件 支持 . 有 的 
浏览 器 可 能 不 支持 这 种 格式 。PNG 格式 最 多 可 以 
支持 32 位 颜色 ， 但 是 不 支持 动画 图 。 
3. GIF (Graphics Interchange Format) 
GIF 是 Web 上 最 常用 的 图 像 格式 ， 它 可 以 用 
来 存储 各 种 图 像 文件 。 特 别 适用 于 存储 线条 、 图标 
和 计算 机 生成 的 图 像 、 卡 通 和 其 他 有 大 色 块 的 
图 像 。 
GIF 格式 的 文件 容量 非常 小 . 形成 的 是 一 种 压 
缩 的 8 位 图 像 文 件 . 所 以 最 多 只 支持 256 种 不 同 的 
颜色 。Gif 支持 动态 图 、 透 明 图 和 交织 图 。 




























































































4. BMP (Windows Bitmap) 

BMP 格式 使 用 的 是 索引 色彩 ， 它 的 图 像 具 有 
极其 丰富 的 色彩 ， 可 以 使 用 16M 色彩 泻 染 图 像 。 
此 格式 一 般 用 在 多 媒体 演示 和 视频 输出 等 情况 下 。 
5. TIFF (Tag Inage File Format) 

TIFF 格式 是 对 色彩 通道 图 像 来 说 最 有 用 的 格 
式 , 支持 24 个 通道 ， 能 存储 多 于 4 个 通道 。TIFF 
格式 的 结果 要 比 其 他 格式 更 大 、 更 复杂 , 它 非 常 适 
合 于 印刷 和 输出 。 

6. TGA (Targa) 

TGA 格式 与 TIFF 格式 相同 , 都 可 以 用 来 处 理 
高 质量 的 色彩 通道 图 形 。 另 外 , PDD、PSD 格式 也 
是 存储 包括 通道 的 RGB 图 像 的 最 常见 的 文件 
格式 。 


8.1.2 插入 图 像 


在 Dreamweaver 中 ， 除了 可 以 插入 一 些 普通 
的 图 像 文件 之 外 ， 还 可 以 插入 鼠标 经 过 图 像 、 
Fireworks HTML 等 类 型 的 图 像 。 
1. 插入 普通 图 像 

将 光标 放置 在 所 需 插入 图 像 的 位 置 , 执行 【 插 
入 】| 【图 像 】 命 令 ; 或 者 在 【插入 】 面 板 中 ， 单 
击 Image 按钮 。 



























































然后 . 在 弹出 的 【选择 图 像 源 文件 】 对话 框 中 . 
选择 图 像 文件 ， 单 击 【确定 】 按 钮 即 可 。 
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用 户 可 以 通过 组 合 键 Ctrl+AlttI， 快 速 打开 
【选择 图 像 源 文件 】 对 话 框 。 





2. 插入 鼠标 经 过 图 像 
选择 图 像 插入 位 置 , 执行 【插入 】 IETMLI【 鼠 

















标 经 过 图 像 ] 命令 , 在 弹出 的 【插入 鼠标 经 过 图 像 】 
对 话 框 中 ,设置 各 选项 即 可 。 
插入 鼠标 经 过 图 像 
图 像 名 称 -[Inagel = 
En | E 到 


回 预 堵 自 标 经 过 图 像 
替换 文本 


按 下 时 ， 前 往 的 URL: 滞 











在 【插入 鼠标 经 过 图 像 】 对 话 框 中 , 主要 包括 

下 列 6 个 选项 。 

口 图 像 名 称 用 于 设置 鼠标 经 过 图 像 的 名 称 ， 
不 能 与 同 页 面 其 他 网 页 对 象 的 名 称 相 同 。 

口 原始 图 像 ”用 于 设置 页 面 加 载 时 显示 的 
图 像 。 

口 鼠标 经 过 图 像 ”用 于 设置 鼠标 经 过 时 显 
示 的 图 像 。 

口 预 载 鼠 标 经 过 图 像 ”启用 该 复 选 框 ， 在 济 
览 网 页 时 原始 图 像 和 鼠标 经 过 图 像 都 将 
被 显示 出 来 。 

口 替换 文本 用 于 输入 为 使 用 只 显示 文本 
浏览 器 的 访问 者 描述 图 像 的 注释 。 

口 按 下 时 ,前 往 的 URL 用 于 设置 鼠标 单 击 
该 图 像 后 所 转向 的 目标 。 











如 用 户 不 设置 【 按 下 时 , 前 往 的 URL)】 选项 ， 


Dreamweaver 将 自动 将 该 选项 设置 为 #。 


8.1.3 ”设置 图 像 属性 


eeee 
eeee 
日 
日 








在 网 页 中 插入 图 像 之 后 . 选择 图 像 则 会 在 【 属 























性 】 面 板 中 显示 图 像 的 各 个 属性 。 
























作 用 

主要 用 于 显示 图 像 缩 略图 、 大 
小 和 图 像 在 网 页 中 唯一 的 标识 
用 于 显示 图 像 的 源 文件 地 址 
用 于 图 像 在 网 页 中 所 应 用 的 
CSS 样式 

图 像 在 水 平方 向 〈 宽 ) 和 简直 
方向 (高 ) 的 尺寸 

用 于 指定 在 只 显示 文本 的 浏览 器 
或 已 设置 为 手动 下 载 图 像 的 浏览 
器 中 代替 图 像 显示 的 替换 文本 
用 于 设置 图 片 的 提示 信息 ， 设 
置 之 后 将 鼠标 停留 在 图 片上 将 
显示 提示 信息 

图 像 所 应 用 的 超 链接 URL 地 址 
调用 相关 的 图 像 处 理 软件 
编辑 图 像 (例如 , PSD 使 用 
Photoshop ， PNG 使 用 
Fireworks) 

一 | 打开 【图 像 优化 〗】 对 话 框 ， 
了 | 优化 图 像 


图 像 信 息 
Src 


Class 


宽 和 高 


替换 








如 使 用 的 是 PSD 文档 输出 
的 图 像 文 件 , 可 将 图 像 与 源 
PSD 关联 , 单 击 此 按钮 进行 
动态 更 新 








对 图 像 进行 裁剪 操作 ,删除 
被 裁剪 挤 的 区 域 





一 | 对 已 经 调整 大 小 的 图 像 重 


新 读 取 该 图 像 信息 
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寺 认 和 | | 在 强 出 的 【这 度 和 对 比 度 】 
全 生生 | 加 | 对 话 杠 中 ,调整 图 你 的 充 度 
和 对 比 度 
在 生出 的 [ 售 化 ] 对 庄村 让， 
名 | 加 消除 图 像 的 模 移 效果 
指定 迁 接 的 页 应 加 载 到 的 梳 架 
目标 
或 窗口 
风 四 | 各 外 委 | 一] 芝 环 国 信 上 方 的 区 衣 多 撤 ， 
点 工具 | 因 | 并 进行 移动 或 其 他 操作 














续 表 











在 图 像 上 方 绘制 一 个 和 矩形 
的 热点 链接 区 域 

在 图 像 上 方 绘制 一 个 圆 形 
的 热点 链接 区 域 

在 图 像 上 方 绘制 一 个 多 边 
形 的 热点 链接 区 域 
如 使 用 的 是 PSD 文档 输出 的 图 
像 文件 ， 此 处 将 显示 PSD 文档 
的 URL 路 径 














编辑 图 像 





为 网 页 插入 图 像 之 后 .还 需要 根据 网 页 的 设计 
需求 , 对 图 像 进行 一 系列 的 更 改 和 调整 . 以 使 图 像 





即 可 等 比例 调整 图 像 的 大 小 。 








适应 网 页 的 整体 布局 。 
8.2.1 更 改 图 像 


原始 图 像 添加 到 网 页 后 , 会 由 于 尺寸 过 大 或 过 
小 而 影响 整体 布局 , 此 时 用 户 可 通过 载 剪 图 像 和 调 
整 图 像 大 小 等 方法 ， 来 更 改 图 像 。 
1. 调整 图 像 大 小 

网 页 中 所 添加 的 图 像 一 般 会 以 原始 大 小 进行 
显示 ,此 时 用 户 可 以 在 【属性 】 面 板 中 .通过 调整 
【 宽 】 和 【高 】 属 性 值 ， 来 调整 图 像 的 大 小 。 












































调整 图 像 大 小 之 后 ， 在 【 宽 】 和 【高 】 届 性 
选项 右 侧 将 新 增 两 个 按钮 ， 单 击 图 按钮 可 以 
将 图 像 重 置 为 原始 大 小 ， 而 单 击 国 按钮 则 可 
以 提交 图 像 大 小 。 





另外 .用 户 还 可 以 将 鼠标 移 至 图 像 四 周 的 控制 
点 上 . 通过 拖 动 鼠标 的 方法 来 调整 图 像 的 大 小 。 例 
如 . 将 鼠标 移 至 图 像 右 下 角 的 控制 点 上 . 拖 动 鼠 标 





村 











2. 裁剪 图 像 

裁剪 图 像 是 删除 图 像 中 多 余 的 部 分 ,在 【属性 】 
面板 中 . 单 击 【裁剪 】 按 钮 ， 此 时 系统 将 自动 弹出 
提示 框 , 提示 用 户 是 否 进行 裁剪 操作 , 单 击 【 确 定 】 
按钮 即 可 。 









































此 时 . 图 像 中 将 出 现 一 个 裁剪 区 域 . 拖 动 裁剪 
区 域 四 周 的 控制 点 . 即 可 调整 裁剪 区 域 。 调整 完毕 
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之 后 ,双击 或 按 回 车 键 .完成 裁剪 操作 。 


re 




















8.2.2 ”调整 图 像 


调整 图 像 是 根据 设计 需求 ， 调 整 图 像 的 亮度 、 
对 比 度 、 清 晰 度 . 以 及 优化 图 像 和 重新 取样 等 操作 . 
以 保证 图 像 的 最 佳品 质 。 
1. 优化 图 像 

优化 图 像 是 通过 调整 图 像 的 格式 和 品质 等 属 
性 ， 来 达到 美化 图 片 和 提升 网 页 加 载 速度 的 目的 。 
选择 图 像 . 在 【属性 】 面 板 中 单 击 【 编 辑 图 像 设 置 】 
按钮 在 弹出 的 【图 像 优化 】 对 话 框 中. 单 击 【 预 
置 】 下 拉 按 钮 ,选择 一 种 预 置 选项 .使 用 预 置 优化 






































Dreamweaver 为 用 户 提供 了 【用 于 照片 的 
PNG24 (锐利 细节 )】、【 用 于 照片 的 JPEG (连续 色 
调 )】、 【徽标 和 文本 的 PNG8】.【 高 清 JPEG 以 实现 
最 大 兼容 性 】、 【用 于 背景 图 像 的 GIF (图 案 )】 和 
【用 于 背景 图 像 的 PNG32 (渐变 )】6 种 预 置 样式 . 
除了 使 用 每 种 预 置 样式 默认 的 设置 之 外 . 用 户 还 可 
以 自 定义 优化 设置 。 

例如 ,使 用 【用 于 背景 图 像 的 GIF (图 案 )】 
预 置 样式 时 ， 系 统 会 自动 显示 默认 的 各 属性 设置 。 















































如 果 用 户 想 自 定义 优化 属性 ， 则 可 以 设置 格 
式 、 调 色 板 、 颜色、 失真 、 色 版 等 属性 选项 . 设置 
之 后 其 【 预 置 】 选 项 将 为 空 . 单 击 【确定 】 按 钮 即 
可 完成 自 定义 优化 设置 的 操作 。 

















2. 调整 亮度 和 对 比 度 

调整 亮度 和 对 比 度 主要 用 于 修饰 过 暗 或 过 亮 
的 图 像 . 该 操作 可 以 影响 图 像 的 高 亮 显示 、 阴 影 和 
中 间 色 调 。 

选择 图 像 . 在 【属性 】 面 板 中 单 击 【 亮 度 和 对 
比 度 】 按钮 。 在 弹出 的 【亮度 和 对 比 度 】 对 话 框 中 ， 
通过 调整 【亮度 】 和 【对 比 度 】 参 数值 ,来 调整 图 
片 的 过 暗 或 过 亮 效果 。 























3. 锐 化 图 像 

锐 化 图 像 是 通过 增加 图 像 边 缘 像 素 的 对 比 度 . 
来 达到 增加 图 像 清晰 度 或 锐 度 的 优化 效果 。 

选择 图 像 ， 在 【属性 】 面 板 中 单 击 【 锐 化 】 按 
钮 。 在 弹出 的 【 锐 化 】 对 话 框 中 . 通过 设置 【 锐 化 】 
选项 值 ， 来 增加 图 片 的 清晰 度 。 




















4. 重新 取样 

在 Dreamweaver 中 调整 图 像 大 小 时 ， 用 户 可 
以 对 图 像 进行 重新 取样 ， 以 适应 其 新 尺寸 。 但 是 ， 
对 位 图 对 象 进行 重新 取样 时 , 会 在 图 像 中 添加 或 删 

















除 像素 ， 以 使 其 变 大 或 变 小 。 

另外 ,对 图 像 进行 重新 取样 以 取得 更 高 的 分 辨 
率 一 般 不 会 导致 品质 下 降 。 但 重新 取样 以 取得 较 低 
的 分 状 率 总 会 导致 数据 丢失 ， 并 且 通 常会 使 品质 
下 降 。 

如 果 用 户 想 对 图 像 重 新 取样 ， 只 需 在 【属性 】 
编辑 器 中 单 击 【 重 新 取样 】 按 钮 即 可 。 











iorss ne] los 无 
9 自 山 it 本 











8.2.3 ”使 用 图 像 热 点 


图 像 地 图 指 被 分 为 多 个 区 域 (热点 ) 的 图 像 . 
而 图 像 热 点 隶属 于 图 像 地 图 , 可 以 实现 “一 图 多 链 ” 
的 超 链 接 特效 。 

图 像 热点 只 是 在 一 幅 图 像 中 的 某 一 部 分 区 域 
内 包含 超 链接 信息 . 对 于 图 像 中 其 他 未 定义 的 区 域 
不 存在 任何 影响 . 一 般 用 于 导航 栏 制作 和 地 图 多 点 
链接 等 。 
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1. 绘制 热点 形状 

Dreamweaver 为 用 户 提供 了 珑 形 、 圆 形 和 多 边 
形 三 种 热点 工具 , 在 【属性 】 面 板 中 选择 一 种 热点 
工具 . 移动 鼠标 至 图 像 上 方 . 拖 动 鼠标 即 可 绘制 热 
点 形状 。 


















































2. 设置 热点 属性 


热点 属性 。 此 时 ， 用户 可 在 【连接 】 文本 框 中 输入 
连接 地 址 ,例如 输入 地 址 http://www.baidu.com。 
然后 , 将 【目标 】 选 项 设置 为 blank， 将 【替换 】 
设置 为 “百度 搜索 ”。 其 各 属性 设置 的 含义 表示 单 
击 图 像 中 的 热点 , 将 会 自动 链接 到 “百度 ”网 页 中 ， 
进行 相应 的 搜索 操作 。 




















最 后 . 保存 网 页 文档 , 按 F12 键 , 系统 将 自动 
跳 转 到 浏览 网 页 中 。 在 该 网 页 中 . 单 击 图 像 中 的 热 
点 区 域 ， 系统 将 自动 跳 转 到 “百度 ”页 面 中 。 


局 > 
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页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 : 








户 除 了 可 以 在 网 页 中 插入 普通 图 像 、 鼠 标 经 
过 图 像 等 基本 图 像 以 外 , 还 可 以 插入 其 他 与 图 像 相 
关 的 对 象 ， 如 背景 图 像 、 图 像 的 占 位 符 等 。 


8.3.1 插入 背景 图 像 


虽然 网 页 中 的 图 像 一 般 不 允许 输入 文本 或 插 
入 其 他 类 型 的 文件 , 但 是 用 户 可 通过 插入 背景 图 像 












































插入 图 像 对 象 


按钮 即 可 将 图 像 添 加 到 网 页 背景 中 。 而 网 页 中 的 文 
字 ， 则 会 显示 在 图 像 上 方 。 








2. 设置 重复 属性 

在 默认 状态 下 . 网 页 的 背景 图 像 大 小 如 小 于 网 
页 ， 则 会 自动 重复 显示 。 用 户 可 以 在 【页 面 属性 】 
对 话 框 中 设置 【重复 】 选 项 。 








分 类 外 观 (css) 


Wy 页 而 字体 (D; [加 由 人 字体 v v 了 


I 全 大 小 G) y] 攻 
让 文本 着 色 (): 国 






























































的 方法 ,来 解决 上 述 文件 。 
1. 添加 背景 图 片 
在 【属性 】 面 板 中 ， 单 击 【 页 面 属性 】 按 钮 . 
打开 【页 面 属 性 】 对 话 框 。 在 【分 类 】 列 表 框 中 . 
选择 【外 观 (CSS)】〗 选 项 ， 并 单 击 【 背 景 图 像 】 
选项 右 侧 的 【浏览 】 按 钮 。 
页 面 尾 性 本 | 
| 分 类 外 观 (css) 
有 | 名 下 (ma 页 而 字体 (加 同人 v v v 
I 大 小 6) 避 属 
REN x*maa' 加 
俏 果 颜色 全 ; 国 | 单 击 
人 ED 
重 夏 人 
左边 距 地 四 右边 蝎 () 严 
上 边 距 (了 pe 下 边 更 (0) px 
[| 部 助 U0) [ 达 |] 应 用 从) 
在 弹出 的 【选择 图 像 源 文件 】 对 话 框 中 . 选择 
图 像 文件 ， 单 击 【 确 定 】 按 钮 。 
像 源 广 { Ea 
| 5 
~ 回 @ 
[G# 二 ] 
京 灌 




















然后 . 在 【页 面 属性 】 对 话 框 中 . 单 击 【确定 】 








戎 果 大 色 (): 国 | 
背景 图 像 (1) 浏览 人 
重 夏 (2): | | 
左边 距 仙 ): |repeut 右边 距 (8) px 
ib): 下 ib (0) 
Ey [3 了 | [应 用 
【重复 】 选 项 中 主要 包括 下 表 中 的 4 种 样式 。 










背景 图 像 不 重复 
背景 图 像 重复 

背景 图 像 只 在 水 平方 向 重复 
背景 图 像 只 在 重 直 方向 重复 





Tepeat 
Tepeat-X 










8.3.2 插入 Photoshop 智能 对 象 


Dreamweaver 不 仅 能 够 插入 PSD 格式 的 图 像 , 
而 且 还 可 以 以 简单 的 方法 直接 更 新 和 编辑 PSD 





图 像 。 
1. 插入 PSD 格式 图 像 

选择 插入 位 置 . 执行 【插入 】| 【图 像 】 命 令 . 
在 弹出 的 【选择 图 像 源 文件 】 对 话 框 中 , 选择 PSD 
图 像 文件 ， 单 击 【 确 定 】 按 钮 。 





























然后 , 在 弹出 的 【图 像 优 化 】 对 话 框 中 ,设置 
图 像 优 化 选项 ， 单 击 【 确 定 】 按 钮 即 可 。 





3he 生 :|[ 高 寺 JPe6 以 实现 .。 | 匡 | 
Ca |] 


rm Cr 
品质 : E 


wd 








此 时 , 由 于 所 插入 的 图 像 未 保存 . 系统 会 自动 
弹出 【保存 Web 图 像 】 对 话 框 , 设置 保存 名 称 ， 
单 击 【 保 存 】 按 钮 即 可 。 


站 点 根 目录 
站 点 和 服务 器 








选择 文件 名 自 : 轿 文 件 系统 








2015/3/26 1056 
2015/3/23 11:20 
2015/3/23 11:24 
2015/3/23 8:55 
2015/3/23 8:56 


2015/3/26 10:57 
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保存 PSD 格式 图 像 后 ， 系 统 将 会 在 网 页 的 
左上 角 显 示 【 图 像 已 同步 】 图 标 ， 表 示 该 图 
像 为 Photoshop 智能 图 像 。 





2. 复制 Photoshop 图 像 
除了 直接 插入 整个 Photoshop 图 像 之 前 , 用 户 还 
可 以 复制 Photoshop 图 像 中 的 部 分 区 域 至 网 页 中 。 
由 于 PSD 格式 的 图 像 属 于 分 层 图 像 ， 因 此 用 
户 可 以 在 Photoshop 中 有 选择 地 复制 图 像 。 例 如 
在 Photoshop 中 选择 某 个 图 层 , 执行 【编辑 】|【 拷 
贝 】〗 命 令 , 复制 图 层 。 


[二 中 ”六 夯 " 区 IE w > EE 
文 fK 图 层 连 拧 (9。 汪 绚 rm 视图 1 窑 口 W】 帮助 (Hi 

































































然后 ,切换 到 Dreamweaver 中 ， 执 行 【 编 辑 】 
| 【粘贴 】 命 令 ， 在 弹出 的 【图 像 优 化 】 对 话 框 中 
设置 优化 选项 , 单 击 【 确 定 】 按 钮 。 最 后 ,在 弹出 
的 【保存 Web 图 像 】 对 话 框 中 ,设置 保存 名 称 ， 
单 击 【 保 存 】 按 钮 即 可 。 








图 文件 系统 









































图 作文 件 (.png) 





























页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 


组 建 (CC 2015 中 文 版 ) 从 新 





网 页 制作 与 


,时 国 练 习 : 制作 招商 信息 网 页 


Dreamweaver 中 的 Div 标签 具有 强大 的 设计 功能 ,运用 该 标 
签 不 仅 可 以 在 网 页 中 添加 各 种 类 型 的 表单 元 素 ， 而且 还 可 以 布局 
整体 网 页 ， 从 而 达到 优化 网 页 的 目的 。 在 本 练习 中 ， 将 通过 制作 
一 个 招商 信息 网 页 ， 来 详细 介绍 实用 Div 标签 以 及 凡 套 Div 标签 





























































布局 网 页 的 操作 方法 和 实用 技巧 。 @ 附加 CSS 样式 表 
源 广 经 贸 哲 志 .uml @ 设置 页 面 属性 
@ 插入 Div 标签 
@@ 说 套 Div 标签 
Who @ 链接 文本 
a @ 制作 列表 文本 
i @ 使 用 map 标签 
， 集 矿 拉 实则 隆 刘 | 唐 才 和 8 合 








上 海 市 永川 区 某 别墅 小 区 在 建 工 程 项 目 招商 信息 


而 开发 提高 格林 9 概 匡 ， 汪 0p#46 45 各 ， 闪 他 让 地 (其 中 出 让 地 42 机 ， 适 双打 南 ) ， 地 了 
条 丰 91c00 府 折 区 幸 色 生 矶 公 因 下 山 恒 ， 可 忆 拓 下 | 和 区 全 果 ， 位 轩 避 住 

















上 > 
操作 步骤 “》》》 STEP|03 在 弹出 的 【页 面 属性 】 对 话 框 中 的 【多 
STEP|01 设置 页 面 属 性 。 启 动 Dreamweaver, 在 ” 观 (CSS)】 选 项 卡 中 ,设置 页 面 文本 大 小 。 
欢迎 界面 中 选择 HTML 选项 , 创建 一 个 空白 页 面 。 | 
Dreamweaver a 
EE someon. 设 豆 瑞 三 
重复 人 | v 
| EEC 
上 动 踊 ff) | EE 下 ibE(0): 加 mv 
| [7 确 EE [| 联 沿 | | 厄 用 [J 








STEP|04 打开 【标题 /编码 】 选 项 卡 ， 在 【标题 】 
文本 框 中 输入 页 面 标题 ， 并 单 击 【 确 定 】 按 钮 。 














STEP|02 然后 ,在 页 面 下 方 的 【属性 】 面 板 中 . 
单 击 【页 面 属性 】 按 钮 。 









ED 









外 烽 式 (8) 无 v 
[ 和 二 


文档 标题 无 村 要 文 入 [EEE 医 下 二 Ez [mn mr me 


文件 x 和夫 
Bt 让 上 和夫 了 sitea 
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STEP|05 关联 CSS 样式 表 。 执 行 【 窗 口 】| 【CSS 
设计 器 】 命 令 ， 在 打开 的 【CSS 设计 器 】 面 板 中 . 
单 击 【 源 】 窗 口中 的 【添加 CSS 源 】 按 钮 ， 选择 
【附加 现 有 的 CSS 文件 】 选 项 。 








STEP|06 在 弹出 的 【使 用 现 有 的 CSS 文件 】 对 话 
框 中 ， 单 击 【 浏 览 】 按 钮 。 








STEP|07 然后 ,在 弹出 的 【选择 样式 表 文件 】 对 
话 框 中 ,选择 CSS 样式 表 文 件 ， 单 击 【 确 定 】 按 
钮 即 可 。 


控 志 - 招 寺 信息 网 页 2 


上 时 ~ 加 @ 








| 








na Le J 





STEP|08 制作 版 头 部 分 . 执行 【插入 】[Div 命令 . 





3 第 8 章 
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在 弹出 的 【插入 Div] 对 话 框 中 . 将 JD 设置 为 logo， 
并 单 击 【确定 】 按 钮 。 














STEP109 删除 Div 标签 中 的 文本 信息 ,执行 【 插 
入 】| 【图 像 】 命 令 ， 在 弹出 的 【选择 图 像 源 文件 】 
对 话 框 中 ,选择 图 像 文 件 ， 并 单 击 【 确 定 】 按 钮 。 





个 下 “ 到 信息 网 页 images v | C | | 王 要 images 站 


Et ”新建 X 件 严 给 回 @ 


Asxrrafiparipeerp ~ 





STEP|10 切换 到 【代码 】 视 图 中 ， 修 改 <img> 标 
签 中 的 代码 ， 并 添加 map 代码 。 





1 Sa 
3 hen 





STEP|11 制作 导航 条 。 将 光标 定位 在 </div> 和 
</body> 标 签 中 间 . 执行 【插入 】|Div 命令 . 在 【 插 
入 Div】 对 话 框 中 . 将 了 D 设 置 为 nav. 并 单 击 【 确 
定 】 按 钮 。 




















180 





网 由 和 (CC 2015 中 文 版 ) 从 新 手 到 





STEP|12 紧 接 着 . 执行 【插入 】|Div 命令 . 插入 
一 个 名 为 time 的 Div 标签 . 并 在 标签 中 输入 文本 。 


heiehe="79" borde' Senap= "Map™ /3 









STEP|13 将 光标 定位 在 </div> 和 </div> 之 间 . 执行 
【插入 】|Div 命令 ,插入 名 为 navText 的 Div 标签 。 














99 ,34,949, 56" hre' 
49 ,323,997, 56" hre 





<area shape="rect" ct 
<area shape="rect™ 





5 </body> 
27 </html> 





STEP|14 在 【属性 】 面 板 中 ， 单 击 【 项 目 列表 】 
按钮 ， 然 后 在 【代码 】 视 图 中 输入 项 目 列表 文本 。 








天 是 2015 年 5 月 8 日 </div> 


Text"> 






接 式 (1) | 无 “| -EE 
mm) 所 ~ 
EJ 














STEP|15 选择 文本 “首页 “. 在 【属性 】 面 板 中 的 
【链接 】 文 本 框 中 输入 链接 地 址 。 












[ma 和 G [无 
本 ES | zn) 天 四 
文 闪 标 短 | 产品 毕 81 绍 






































STEP|16 然后 . 在 【代码 】 视 图 中 ,修改 链接 文 
本 的 HIML pi 使 用 同样 的 方法 ,制作 其 他 列 
表 目 录 文 本 。 





nT A 
am 
26 <tly<a href=*javascript:votd(nutD ji" titte=" 首 页 "> 首页 </ 
ayc/ti> 


Lic hrefcqjavaseript:veid(nutDin title=" 新 闻 中 心 新 
心 < 


script:void(nuLL)i” titLe=" 拍 卖 公 告 "> 拍 





avascriptiveid(nutD in titte=" 联 系 我 们 w 联 








STEP|17 制作 内 容 谋 套 Div 标签 。 将 光标 定位 在 
</div> 和 </body> 标 签 中 间 ， 插入 一 个 名 为 content 
的 Div 标签 。 










voidfnutUi" titt 


司 。 dv 这 concent">LRIIEETRETTTEETSENSE cdiv> 


</htnt> 





STEP|18 在 该 Div 标签 中 ,连续 插入 名 为 leftmain 
和 xwzx 的 两 个 Div 标签 。 





< hrefrrjavascript: void(null);" ith 童生 拍 交 
卖 公告 <Jac/t> 
+Ui<a hrefc"javascriptivoid[nuLUjn titte=" 联 系 我 们 "> 联 
系 我 们 e/a></11> 
cup 
</div> 
</div> 
< 由 
di To- "oftma nn 
<div 1d="ywzx"> 加 0 
















十 





STEP|19 在 Div 标签 xwzx 内 ,输入 有 关 新 闻 
心 内 容 的 项 目 列表 . 并 分 别 为 每 个 项 目 列表 文本 添 
加 链接 和 关联 CSS 样式 表 。 




















javascript:void(nutU) jeitte-w 江 北 区 天 文 
全 大 厦 "> 江北 区 关 文 台大 大 < [a></ Li> 

7 ><a href="javascript:void(null) jw titte=" 渔 中 区 三 屿 
大 夏 "> 渝 中 区 三 屿 大 厦 </a></Ui> 

sa Seer vaseript void(nutD ii title=" 重 庆贺 | 总 
厂 地 块 "> 重庆 锅炉 总 三 地 块 < 

39 <ti>ca hrer=" esoriptavod ott) :CIELe=e 生成 招亲 
BL ee 大 厦 "</a></1Li> 

46 ipt:void(nuLL) ;” titte=" 集 成 拍卖 助 
阵 刘德华》 ey re </a></Ui> 

四 </ut|<ydiv> 品 








STEP|20 将 光标 定位 在 </div> 和 </div> 之 间 .插入 
一 个 名 为 xwzxbg 的 Div 标签 . 


并 删除 标签 内 容 的 


title=" 重 庆 锅炉 芯 


title="'! 集 成 白雪 






titLe=" 集 5 对 里 助 


会 </ay</ti> 





STEP|21 将 光标 定位 在 名 为 xwzxbg 的 Div 标签 
之 后 的 </div> 标 签 处 ， 连 续 插入 名 为 Tightmain 和 
daohang 的 Div 标签 ， 并 输入 相关 代码 。 







me "=p RE 5 
4 void(nutU jw titte-" 集 薄 b 寺 助 
测 旧 会 </a></Li> 









46 





STEP|22 在 其 后 插入 一 个 名 为 title 的 Div 标签 , 
并 在 标签 中 输入 文本 信息 。 





ZiSea href=njavascri EEC 
降 刘 德 华 演唱 会" 集成 持 卖 上阵 刘 短 红 
1 /utzejdiw 

div 1 中 wywzxbgoy< 








< 





STEP|23 插入 名 为 banner 的 Div 标签. 删除 文本 。 
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紧 接 着 插入 名 为 detailTilte 的 Div 标签 ， 并 输入 文 
本 信息 。 


<7oPsrdiw 
<div id ozxbgn>c/div> 










gr 首页 </a> kgtica href-ngv》 记 


在 建 工程 项 目 招商 信息 </div> 








STEP|24 在 其 后 插入 一 个 名 为 detail 的 Div 标签 , 
在 该 标签 中 输入 文本 内 容 ， 并 设置 文本 的 段落 
格式 。 





<div snaaejU5c<ha> 上 海 市 永川 区 某 别 时 小 区 在 建 工 程 项 目 招商 信息 人 ^ 
<jha> 

<p> 项 目 为 规划 开发 的 高 档 休闲 别墅 区 ， 占 地 面积 约 46.46 直 , 为 别 
骂 十 让 地 (其 中 出 让 地 42.58 调 ,道路 划 找 地 3.99 亩 》, 位 于 政府 着 力 <br /> 
人 可 刍 识 永川 城区 全 景 ， 
位 置 极 佳 。</p> 


< 
斋 目 规划 后 建设 规模 21264. gemcsup>2</sup>， 其 中 扫 称 判 时 
up>2</sup>， 双 撞 呈 县 4943.28n<sup>2</sup>， 休闲 会 所 
| 儿 77 宕 ， 信 车 位 63 个 ，<br /> 
容积 率 . 587， 规划 经 地 面积 14366.3om<sup>2<1sup>， 经 地 率 高 达 









<p> 
月 前 泣 俩 月 己 一 二 半 雪 次。 声 直 亚 款 “源源 十 机 楼 人 40 仙 v 








STEP|25 制作 版 尾 内 容 。 将 光标 定位 在 </div> 和 
</body> 标 签 之 间 ， 插 入 一 个 名 为 footer 的 Div 标 
签 . 并 在 标签 之 内 输入 版 尾 文本 。 


xpumrucrrzrrzasor-77 


. 全 年 房地产 并 家 投 深 



















div 1 ooterm-p、 基 月 全 作 方 式 : 转让 /联合 

: 6883517X 、 王 小 姐 ”中 全 动力 提供 技术 支持 </p> 
p> Copyright &copy32691 ALL rights reserved、 源 广 贸 晴 折 关 

在 限 责任 公司 /p>2ydi> 

ET 

7 </html> 











,天 调 练习 : 制作 新 闻 图 片 网 页 





现在 的 门户 网 站 上 大 多 都 有 新 闻 板块 ， 出 现 的 新 闻 类 别 也 是 多 
种 多 样 ， 除 了 传统 的 文字 新 闻 外 ， 图 片 新 闻 、 音 频 、 视 频 新 闻 也 很 
常见 。 在 本 练习 中 ， 将 通过 插入 图 片 来 制作 一 个 新 闻 图 片 网 页 。 
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国 国 行 Fr 





山西 : 接 于 起 各 的 关系 








操作 步骤 “》》》 


STEP|01 设置 页 面 属性 。 启 动 Dreamweaver， 在 关 表 格 属性 设置 的 CSS 规则 。 


欢迎 界面 中 选择 HIML 选项 , 创建 一 个 空白 页 面 。 





了 医 Droamwoaror 
人 


bl] 
Te RS 





tt 





STEP|02 然后 .在 页 面 下 方 的 【属性 】 面 板 中 . 
单 击 【页 面 属性 】 按 钮 。 














STEP|03 在 弹出 的 【页 面 属 性 】 对 话 框 中 的 【多 
观 (CSS)】? 选 项 卡 中 ,设置 文本 的 字体 大 小 。 











E02 




















@ 插入 图 片 
@ 插入 表格 
@ 合并 单元 格 
丽江 古 域 的 岳 丁 区 地 
| 
2015 让 副 革 各 守 失 于 的 地 设置 表格 属 性 
和 @ 设置 单元 格 属性 
@ 新 建 CSS 规则 
2016 全 闭 开 平 人 中 东 攻 辽 @ 应 用 CSS 规则 
2015 桂 天 个 肝 消 全 台 攻 峰 @ 设置 字体 格式 
2015 质 门 自助 消 全 台 攻 辽 
STEP|04 然后 ,切换 到 【代码 】 视 图 中 ,输入 有 
background-color :aECFSFF 
border -Left:#665 sotid 2px; 
border-right:#666 solid 2px 
border-botton: 586 solid 2px 
height: 135px 
dtitle 
color: FFF; 
font-stze:1apx 
bockground-color:n999 
hetghr:28px 
padding-teft:19pxi 








STEP|05 制作 表 头 部 分 。 执 行 【插入 】|【 表 格 】 
命令 . 在 弹出 的 【表格 】 对 话 框 中 , 设置 表格 大 小 ， 
单 击 【 确 定 】 按 钮 .插入 一 个 1 行 1 列 的 表格 。 


Table 











表格 大 小 





边框 粗 细 : 0 
单元 格 边 下 :| 
兰 元 格 间 虽 :|0 | 国 



















































































2:::: 第 8 章 ， 设置 网 页 图 像 元 素 





STEP|I06 在 【设计 】 视 图 中 . 选中 表格 . 在 【 属 
性 】 面 板 中 ， 将 Align 设置 为 【居中 对 齐 】。 





STEPI09 在 【设计 】 视 图 中 . 选中 表格 . 在 【 属 
性 】 面 板 中 . 将 用 设置 为 tb02. 将 Align 设置 为 














































































































TT NT 【居中 对 齐 】。 
= 人 EE 
I 4 = i 
OE 本 
i 四 选择 
Fr CT < 人 
国 m 本 一 LE | eer 3 这 5 [Di 
1] : 图 a mE | wp | 全 本 
也 3 
NO] 1 
STEP|07 将 光标 定位 在 表格 内 ， 执 行 【插入 】 | 

















【图像 】 命令 ， 在 并 出 的 【选择 图 像 源 文 件 】 对 话 S|0 钊 作 主 体 庆 套 表格。 选择 第 1 行 中 的 第 


的 【表格 】 对 话 框 中 ,设置 表格 大 小 ， 并 单 击 【 确 
定 】 按 钮 。 





1” 
国 bannerjpg 

国 pic oljpg 

Pic. oj 

加 Pic.0jps 4 
图 pico4jpg 区 

















加 列 [2 | 
表格 宽度 (100 | 百分比 v| 


边框 粗细 : [0 | 你 
se ND) 


单元 格 间距 0 ”| 加 


六 Nauejpg Re Coitjpripeg:.p » 
em 


STEP|08 制作 主体 表格 。 执 行 【 插 入 】| 【表格 】 


命令 , 在 弹出 的 【表格 】 对 话 框 中 . 设置 表格 大 小 ， 
单 击 【 确 定 】 按 钮 ， 插入 一 个 2 行 2 列 的 表格 。 


行 数 上 2 | 殊 [2 
表格 宽度 [5911 | 像素 Y 


边框 8- | STEP|11 选择 左 侧 第 1 列 的 单元 格 ， 在 【属性 】 
单元 格 迪 距 0 | 面板 中 ， 将 【 宽 】 设 置 为 49%。 
单元 格 间距 : |0 s rT IE 






























































ea Sable 
| 
ss 本 TREE 

Ey ap 


EE 车 元 略 。 本 平 (1] 吕 认 A | 
一 交 去。 v| 训 加 | 标题 全 





ia 本， 一 ，EEiiE 下 ED，EE [ID TO 二 
















































































网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 





STEP|12 然后 . 执行 【插入 】| 【图 像 】 命 令 . STEP|15 选择 tb03 表格 中 第 1 行 的 所 有 单元 格 . 




































































择 图 像 文件 ， 单 击 【 确 定 】 按 钮 单 击 【 属 性 】 面 板 中 的 【合并 所 选单 元 格 】 按 钮 
合并 所 选单 元 格 。 
人 
CE | 
gpicrightjpg 
于 : [有 攻 
| 
eh 0 区 ~| | 无 “B71 Se 
css 目标 (3) 
STEPI13 过 择 左 例 第 2 列 的 单元 格 , 在 (人 。 辣 二 (oa 一 




















视图 中 的 <tb> 标 签 内 ， 输 入 设 定单 元 格 属性 的 
STEP|16 在 合并 后 的 单元 格 中 输入 文本 ， 选 择 文 

直 ”本 . 执行 【格式 】|【 段 落 格式 】|【 标 题 3】 命令 ， 
设置 文本 格式 。 








54 /tbody 
55 </table> 
5 /td> 









STEP|14 同时 . 执行 【插入 】| 【表格 】 命令. 在 ” 靶 
[ee 
css mmr) + 


弹出 的 【表格 】 对 话 框 中 , 设置 表格 大 小 , 单 击 【 确 om 
定 】 按 钮 ， 插 入 表格 并 将 表格 命名 为 tb03。 本 遇 一 : 


STEP|17 选择 tb03 表格 中 第 2 行 第 1 列 单元 格 ， 
执行 【插入 】|【 图 像 】| 【图像 】 命 令 ， 选 择 图 像 
文件 ， 并 单 击 【 确 定 】 按 钮 。 























个 县 < 新 站 四 片 RN ，Images 





ttejps 


本 
EE 而 






































STEP|18 同时 . 在 【属性 】 面 板 中 .将 【水 平 】 
选项 设置 为 【居中 对 齐 】]。 使 用 同样 的 方法 ,为 该 
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注 三 网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 ::: 


设置 网 页 图 像 元 素 

















































































STEP|19 制作 右 侧 列表 栏 。 选择 tb02 表格 右 侧 列 
中 的 上 下 两 个 单元 格 . 单 击 【属性 】 面 板 中 的 【 合 
并 所 选单 元 格 】 按 钮 ， 合 并 所 选单 元 格 。 

















STEP|22 选择 第 1 行 ， 输 入 文本 ， 并 在 【属性 
面板 中 将 【水 平 】 设 置 为 【 左 对 齐 ]， 将 【目标 规 
则 】 设 置 为 【.tdtitle】。 


片 专题 


> 动 - 





| 有 刀口 省 呈 全 三 | 
MO 














STEP|20 同时 . 在 【属性 】 面 板 中. 将 【 宽 】 设 
置 为 233， 将 【水平 】 设 置 为 【居中 对 齐 】。 [ roD Namem | 


[JID 
































STEP|23 使 用 类 似 的 方法 ， 分 别 为 本 表格 中 的 其 
他 行 添加 文本 或 图 像 。 





© CI .ma 

| 
Rf OD safe) 上 

Ed BE 村 要 (0 口 





而 江 十 域 的 纳 严 区 地 
2015 自 助演 最 侍从 站 的 地 






































STEP|21 执行 【插入 】| 【表格 】 命令. 在 弹出 的 i 
【表格 】 对 话 框 中 . 设置 表格 大 小 ， 单 击 【 确 定 】 匡 昌 ss 





按钮 ， 插入 表格 并 将 表格 命名 为 tb05。 





页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 


网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 





STEP|24 制作 底部 图 片 栏 。 将 光标 定位 在 tb02 表 ”STEP|26 选择 第 2 行 第 1 列 单元 格 . 在 【属性 】 
格 的 第 2 行 中 . 插入 一 个 3 行 4 列 的 表格 . 并 将 该 ”面板 中 . 将 【水 平 】 设 置 为 【居中 对 齐 】， 同 时 在 
































表格 命名 为 tb04。 该 单元 格 中 插入 相应 的 图 像 。 
Table [> 















































STEP|27 使 用 同样 的 方法 ， 分 别 为 该 表格 中 的 其 
= 他 单元 格 添加 文本 或 图 像 。 
号 可 确定 了 i 


STEP|25 合并 第 1 行 中 的 所 有 单元 格 . 输入 文本 ， 
选择 该 单元 格 ， 在 【属性 】 面 板 中 将 【目标 规则 】 
设置 为 【.tdtitle】。 










































































oo 新 手 训 练 营 
































练习 1: 制作 鼠标 经 过 图 像 #box { 
各 一 height: 640px; 
SedowWnloa oe width: 1137px; 
提示 :本 练习 中 ,首先 新 建 空白 文档 , 执行 【 插 i 
入 】|Div 命令 ， 在 弹出 的 【插入 Div】 对 话 框 中 ， 将 Ct 
ID 设置 为 box， 并 单 击 【新 建 CSS 规则 】 按 钮 ， 创 nD 
en [HTML| 【和 鼠标 经 过 图 像 ] 命令 ,在 弹出 的 【插入 鼠标 
建 CSS 规则 以 设置 标签 的 大 小 .其 CSS 规则 代码 如 经 过 图 像 】 对 话 框 中 ， 设 置 【原始 图 像 】 和 【鼠标 经 
下 所 述 ， 过 图 像 】 选 项 ， 单 击 【 确 定 】 按 钮 即 可 。 
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第 8 章 设置 网 页 图 像 元 素 
































插入 计生 过 图 多 n 
| CD border:#AD9FE6 solid 1px; 
mo 人 } 
县 本 经过 曙 你 (2. jog | 
一 一 > 
| 5 | </style> 
| mtn ,前往 的 URL: me [| 
在 网 页 中 插入 一 个 6 行 1 列 、 宽 度 为 680 像素 、 











单元 格 边 距 和 间距 分 别 为 2， 且 名 为 tb01 的 表格 。 同 
然后 ， 执 行 【 文 件 】| 【保存 】 命 令 ， 保 存 网 页 ， 时 ,在 表格 的 第 1 行 和 第 2 行 中 输入 文本 ,并 设置 广 
并 按 F12 键 在 网 页 中 查看 最 终 效果 。 本 和 单元 格 属性 。 


BB Bs Bs BE, RR 


黄 忽 楼 一 一 旅游 景点 简介 


























练习 2， 制 作 景 点 介绍 网 页 然后 .在 第 3 行 中 插入 一 个 3 行 2 列 .宽度 为 100% 


i 个 单元 的 宽 
Se tn tes 
二 8 。 辐 时 , 全 三 
提示 ， 在 本 练习 中 ， 首 先 新 建 空白 文档 ,在 【 代 员 


个 单元 点 
玛 ] 视图 中 创建 CSS 样式 代码 ， 其 代码 如 下 所 述 ， 个 单元 格 ， 并 插入 景 点 图 像 


<style type="text/css"> 
< 

body 

{ 
background-color:#F1F7D0; 
font-family:" 宋 体 "; 

} 

"STYLEBL 

font-size: 24px; 
font-family: "来 书 "; 

















} 最 后 .在 tb01 表格 的 第 4 行 和 第 5 行 中 分 别 输入 
ES 文本 ， 并 设置 文本 的 字体 格式 及 单元 格 属性 。 同 时 ， 
font-size: 36px; 生前 元 格 扑 言 和 
人 设置 第 6 行 单元 格 的 高 度 和 填充 颜色 .完成 整个 景点 
网 页 的 制作 。 

.STYLE3 { 练习 3: 优化 图 像 

font-size: 12px; 人 downloads\8\ 新 手 训练 营 \ 优 化 图 像 
To 提示 : 在 本 练习 中 , 首先 新 建 空 白文 档 , 执行 【 插 
} 入 】| 【图 像 】 命 令 . 插入 一 张 图 片 。 











#tb01 
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rr 

































br 





然后 . 选择 图 像 ， 单 击 【 属 性 】 面 板 中 的 【 亮 
和 对 比 度 】 按 钮 . 在 弹出 的 【亮度 /对 比 度 】 对 话 框 中 ， 
将 【亮度 】 和 【对 比 度 】 分 别 设置 为 -15 和 24。 最 后 . 
单 击 【 属 性 】 面 板 中 的 【 锐 化 】 按 钮 ， 在 弹出 的 【 锐 
化 】 对 话 框 中 . 将 【 锐 化 】 设 置 为 10. 并 单 击 【确定 】 
按钮 。 

















在 网 页 中 , 超 链接 可 以 帮助 用 户 从 一 个 页 面 跳 转 到 另 一 个 页 面 . 也 可 以 帮助 用 户 跳 转 到 当前 页 面 指 
定 的 标记 位 置 。 可 以 说 , 超 链接 是 连接 网 站 中 所 有 内 容 的 桥梁 , 是 网 页 最 重要 的 组 成 部 分 。Dreamweaver 
内 置 了 文本 、 图 像 、 多 媒体 、 可 下 载 文件 、 电 子 邮件 、 脚 本 等 多 种 链接 方式 ， 以 协助 用 户 轻松 地 通过 可 
视 化 界面 为 网 页 添加 各 类 网 页 链接 。 本 章 将 详细 介绍 网 页 链接 与 路 径 及 创建 各 种 网 页 链接 的 基础 知识 和 
实用 方法 。 








190 








;网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 : 


网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 








创建 文本 与 图 像 链 接 





链接 是 指 从 一 个 网 页 指向 一 个 目标 的 链接 关 


系 . 这 个 目标 可 以 是 网 页 , 也 可 以 是 网 页 中 的 不 同 
位 置 , 还 可 以 是 图 片 、 文 件 、 多媒体、 电子 邮件 地 
址 等 。 这 些 文字 或 者 图 片 称 为 热点 . 跳 转 到 的 目标 
称 为 链接 目标 . 热点 与 链接 目标 相 联系 的 就 是 链接 
路 径 。 


Qi 


文本 链接 是 通过 某 段 文本 指向 一 个 目标 的 连 





创建 文本 链接 


适用 于 为 某 段 文本 添加 注释 或 评论 的 


设计 。 
1. 文本 链接 类 型 


2. 链接 文本 
在 网 页 中 选择 文本 ,在 【插入 ]】 面 板 的 HIML 


在 创建 的 文本 链接 中 ,包含 下 列 4 种 状态 。 





口 普通 在 打开 的 网 页 中 ， 超 链接 为 最 基本 
的 状态 ， 即 默认 显示 为 蓝 色 带 下 划 线 。 

口 鼠标 滑 过 ” 当 饼 标 滑 过 超 链接 文本 时 的 
状态 。 虽 然 多 数 浏览 器 不 会 为 鼠标 滑 过 的 
超 链 接 添 加 样式 , 但 用 户 可 以 对 其 进行 修 
改 ， 使 之 变 为 新 的 样式 。 

口 鼠标 单 击 。 当 饼 标 在 超 链接 文本 上 按 下 时 ， 
超 链接 文本 的 状态 ， 即 为 无 下 划 线 的 橙色 。 

口 已 访问 ” 当 鼠 标 已 单 击 访问 过 超 链接 ， 且 
在 浏览 器 的 历史 记录 中 可 找到 访问 记录 
时 的 状态 ， 即 为 紫红 色 带 下 划 线 。 














类 别 中 ， 单 击 Hyperlink 按钮 ， 或 者 执行 【插入 】 
|Hyperlink 命令 。 





Dw 











wm- Ch [=-lol x] 





然后 ,在 弹出 的 Hyperlink 对 话 框 中 ,设置 链 
接 、 目 标 、 标 题 等 选项 ， 单 击 【确定 】 按 钮 即 可 。 











Hyperlink 
文本 陋 写 入 对 订单 信息 ] [ 古 
话 估 本 男 | |] 
目标 v [施肥 | 
标题 
访问 键 
Tab 刍 索 引 


























.在 Hyperlink 对 话 框 中 ， 主 要 包括 下 列 





6 种 选项 。 
口 文本 显示 在 设置 超 链接 时 选择 的 文本 ， 


表示 即将 进行 超 链接 的 文本 内 容 。 


口 链接 用 于 设置 链接 的 文本 路 径 ， 可 通过 


单 击 【浏览 〗】 按 钮 选择 链接 文本 。 


口 目标 用 于 设置 链接 到 的 目标 框架 ， 其 中 


_blank 表示 将 链接 文件 载 入 到 新 的 未 命名 
浏览 器 中 ，parent 表示 将 链接 文件 载 入 到 
父 框 架 集 或 包含 该 链接 的 框架 窗口 中 ， 
_Self 表示 将 链接 文件 作为 链接 载 入 同一 
框架 或 窗口 中 ，_top 表示 将 链接 文件 载 入 
到 整个 浏览 器 窗口 并 删除 所 有 框架 。 


口 标题 用 于 设置 鼠标 经 过 链接 文本 所 显 


示 的 文字 信息 。 


口 访问 键 ”在 其 中 设置 键盘 快捷 键 以 便 在 


口 Tab 键 索 引 


浏览 器 中 选择 该 超级 链接 。 
用 于 设置 Tab 键 顺序 的 
编号 。 


在 为 文本 添加 超级 链接 后 .用 户 还 可 在 【属性 】 


面板 


h, 选择 HTML 选项 卡 区 aa。 然后 , 在 【 链 





接 】 右 侧 的 【输入 】 文 本 框 中 . 输入 超级 链接 的 地 
址 或 修改 超级 链接 ， 以 及 设置 【标题 】 和 【目标 】 
等 属性 。 





单 击 【属性 】 面 板 中 的 【页 面 属性 】 按 钮 ， 


可 以 改变 网 页 中 超级 链接 的 样式 。 除 此 之 
外 ， 使 用 CSS 也 可 以 改变 超级 链接 的 样式 。 





9.1.2 ”创建 图 像 链接 


图 像 链 接 是 通过 某 个 图 像 指 向 一 个 目标 的 连 
接 关 系 。 在 网 页 中 选择 图 像 . 在 【属性 】 面 板 中 
单 击 【链接 】 选 项 右 侧 的 【浏览 文件 】 按 钮 。 

















然后 , 在 弹出 的 【选择 文件 】 对 话 框 中 ， 
要 链接 的 图 像 文件 ， 并 单 击 【确定 】 按 钮 。 
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在 为 图 像 添 加 超级 链接 后 . 保存 文档 并 按 F12 
键 打开 正 窗口 . 当 鼠 标 指向 链接 图 像 并 且 单 击 后 ， 








在 新 窗口 中 打开 所 链接 的 文件 。 
a PFET + mn -on 


©RND.® fle -QQ 


利 如 a dobe 器 六 人 ” 册 才 5 光 各 加 








及 出 编辑 链接 


为 保证 整个 网 站 的 运行 ， 在 创建 网 页 链接 之 
后 ,除了 通过 检查 链接 状态 来 检查 断 掉 的 链接 之 
外 , 还 需要 通过 测试 链接 、 更 改 链接 和 设置 新 链接 
的 相对 路 径 等 方法 ， 来 更 正和 测试 网 站 中 的 链接 。 


9.2.1 检查 链接 状态 


当 用 户 为 网 页 创建 链接 之 后 , 可 通过 “链接 检 
查 器 ”功能 .来 检查 网 页 中 的 链接 状态 。 

首先 , 执行 【窗口 】|【 结 果 】| 【链接 检查 器 】 
命令 , 在 弹出 的 【链接 检查 器 ] 面板 中 查看 链接 状态 。 








[本 所 5 吏 党 >】( 诗 扩 文件 在 本 地 纪 盘 没有 找到 ) 











在 面板 中 的 【显示 】 选 项 中 , 包括 【 断 掉 的 链 
接 】、【 外 部 的 链接 】 和 【孤立 的 文件 】 三 种 检查 类 
型 ， 用 于 查找 断 掉 、 外 部 和 孤立 的 链接 。 

除 此 之 外 . 用 户 还 可 以 通过 单 击 左 侧 的 【检查 
链接 】 按 钮 , 在 展开 的 菜单 中 选择 所 需 执行 的 检查 
方式 , 包括 【检查 当前 文档 中 的 链接 】 【检查 整个 
当前 本 地 站 点 的 链接 】 和 【检查 站 点 中 所 选 文件 中 
的 链接 】 三 种 。 
















[ 硬 瑚 天 报 | 撕 接 文件 在 本 地 谨 盘 没有 找到 ) 








全 | 
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当 用 户 选择 【检查 整个 当前 本 地 站 点 的 链接 】 
选项 时 , Dreamweaver 将 自动 检查 本 地 站 点 的 所 有 
链接 ， 并 在 【链接 检查 器 】 面 板 中 显示 检查 结果 . 
包括 总 链接 、 正 确 、 断 掉 和 外 部 链接 等 检查 结果 。 





[是 掉 的 链接 = ( 镑 接 文件 在 本 地 磁盘 没有 找到 ) 
者 

















当 用 户 需要 修改 断 掉 的 无 效 链接 , 可 以 在 【和 链 
接 检 查 器 】 面 板 中 . 单 击 链接 地 址 . 对 其 进行 修改 
即 可 。 








9.2.2 ”测试 链接 


创建 链接 之 后 ， 用 户 可 通过 “打开 链接 页 面 ” 
的 方法 ， 来 测试 所 创建 的 链接 。 

首先 打开 包含 链接 的 网 页 . 选择 链接 对 象 。 然 
后 ,执行 【修改 】|【 打 开 和 链接 页 面 】 命 令 ， 即 可 
弹出 所 创建 的 链接 页 面 , 以 方便 用 户 对 链接 内 容 进 
行 修改 。 
Dw wm. CH lL-lol x] 
文件 (F) 岗 器 (6) 在 奢 (V)。 拍 和 (1) (SW) ] FL(O) stO ts(5 BOW) tm(H) 


Uri 
| tem 















管理 字体 (M). 


用 户 可 通过 执行 【编辑 】|【 首 选项 】 命 令 ， 
在 【常规 】 选 项 卡 中 ， 通 过 设置 【移动 文件 
时 更 新 链接 】〗 选项， 来 启动 自动 更 新 功能 。 














9.2.3 更改 所 有 链接 


在 Dreamweaver 中 ， 当 用 户 不 小 心 删除 某 个 
文件 所 链接 到 的 文件 时 ， 则 需要 对 该 链接 进行 更 
改 , 以 杜绝 发 送 断 掉 的 链接 现象 。 但是, 对 于 大 型 
的 网 站 来 讲 . 在 查找 并 更 改 众多 链接 中 的 某 个 链接 
时 , 会 比较 费时 费力 。 此 时 ,用 户 可 通过 更 改 整个 
站 点 范围 内 的 链接 方法 ,来 解决 上 述 文件 。 

选择 所 需 更 改 站 点 内 的 某 个 文件 ,执行 【站 点 】 
| 【改变 站 点 范围 内 的 链接 】 命 令 ， 在 弹出 的 【更 
改 整个 站 点 链接 (站 点 -动漫 设计 )】 对 话 框 中 , 设 
置 相应 选项 即 可 。 


ET 






























































在 该 对 话 框 中 ， 主 要 包括 下 列 两 个 选项 。 

口 更 改 所 有 的 链接 单 击 该 选项 后 的 【浏览 
文件 】 按 钮 ， 在 弹出 的 对 话 框 中 选择 所 需 
修改 的 目标 文件 即 可 。 当 用 户 所 需 更 改 的 
链接 为 电子 邮件 链接 、FTP 链接 、 空 链接 
或 脚本 链接 时 ， 则 需要 在 文本 框 中 直接 输 
入 所 要 更 改 的 链接 的 完整 文本 。 

口 变 成 新 链接 单 击 该 选项 后 的 【浏览 文 
件 】 按 钮 ， 在 弹出 的 对 话 框 中 选择 所 需 修 
改 的 替换 文件 即 可 。 当 用 户 所 需 更 改 的 链 
接 为 电子 邮件 链接 、FTP 链接 、 空 链接 或 
脚本 链接 时 ， 则 需要 在 文本 框 中 直接 输入 
所 要 替换 的 链接 的 完整 文本 。 





当 用 户 对 整个 站 点 范围 内 的 链接 进行 更 改 
之 后 ， 其 所 选 文 件 将 变 成 孤立 文件 〈( 即 本 地 
硬盘 上 没有 任何 文件 指向 该 文件 ) ， 此 时 用 
户 可 安全 地 删除 该 文件 ， 而 不 会 破坏 本 地 站 
点 中 的 任何 链接 。 


9.2.4 设置 新 链接 的 相对 路 径 


默认 情况 下 . Dreamweaver 使 用 相对 路 径 来 创 
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项 卡 。 在 【链接 相对 于 】 栏 中 选中 【文档 】 或 【站 
点 根 目录 】 选 项 . 设置 新 链接 的 相对 路 径 即 可 。 























建 指向 站 点 中 其 他 页 面 的 链接 。 此 时 . 如 果 要 更 改 
站 点 根 目录 中 的 相对 路 径 . 必须 通过 重新 定义 本 地 
文件 夹 来 充当 服务 器 上 文档 根 目录 的 等 效 目录 . 以 
确定 文件 站 点 根 目录 中 的 相对 路 径 。 

首先 , 执行 【站 点 】|【 管 理 站 点 】 命 令 . 在 
弹出 的 【管理 站 点 】 对 话 框 中 ， 双 击 【 您 的 站 点 】 
列表 框 中 的 站 点 名 称 。 

























































































然后 ， 在 弹出 的 【站 点 设置 对 象 站 点 2】 对 
话 框 中 ,选择 【高 级 设置 】 栏 中 的 【本 地 信息 】 选 









i 


于 RF 耶 肖 









































使 用 本 地 浏览 器 预览 文档 时 , 除非 指定 了 测 
试 服务 器 ， 或 在 【首选 项 对 话 框 中 的 【在 
浏览 器 中 预览 〗 选 项 卡 中 ,启用 【使 用 临时 
文件 预览 〗 复 选 框 ， 否则 文件 中 站 点 根 目录 
相对 路 径 链接 的 内 容 将 不 会 被 显示 。 





1 胎儿 创建 其 他 链接 


在 Dreamweaver 中 ， 除了 可 以 创建 文本 和 图 
像 链 接 之 外 , 还 可 以 创建 电子 邮件 、 脚 本 、 锚 记 等 
链接 。 


9.3.1 





创建 电子 邮件 链接 


电子 邮件 链接 是 网 页 中 必 不 可 少 的 链接 对 象 , 
以 方便 收集 网 友 对 该 网 站 的 建议 或 意见 . 它 可 以 以 
文本 和 图 像 等 对 象 进行 创建 。 一般 情况 下 . 用 户 可 
以 使 用 下 列 两 种 方法 ， 来 创建 电子 邮件 链接 。 
1. 属性 设置 法 

在 【属性 】 面 板 中 的 【链接 】 文 本 框 中 输入 
E-Mail 地 址 ,其 输入 格式 为 mailto:name@ 











seIvercom。 其 中 , name(@server.com 替换 为 要 填写 
的 E-mail 地 址 。 例 如 ， 为 图 形 添加 邮件 链接 时 
则 需要 选择 图 像 ， 然后 在 【链接 】 文 本 框 中 输入 邮 
件 地 址 即 可 。 


| 











194 


网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 


2. 插入 法 


首先 ， 将 光标 放置 在 空白 区 域 . 并 在 【插入 】 








面板 的 HTML 选项 卡 中 . 单 击 【电子 邮件 链接 】 





TT A TN 











然后 ,在 弹出 的 【电子 邮件 链接 】 对 话 框 中 . 
设置 邮件 链接 的 显示 文本 内 容 和 邮件 地 址 ， 单 击 
【确定 】 按 钮 ， 即 可 在 光标 处 显示 电子 邮件 链接 
内 容 。 


er 








TR 


TO 





Ta 









































创建 电子 邮件 链接 之 后 ， 按 F12 键 打 开 正 
窗口 ， 单 击 链接 对 象 ， 即 可 链接 到 用 户 客 户 
端的 E-Mail 软件 中 的 【新 邮件 】 对 话 框 中 。 





9.3.2 ”创建 脚本 链接 


脚本 链接 即 执行 JavaScript 代码 或 调用 
JavaScript 函数 。 首 先 ， 在 网 页 中 选择 链接 对 象 。 
然后 , 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 内 
容 “javascript:”， 其 后 跟 JavaScript 代码 或 一 个 函 
数 调用 。 


























创建 脚本 链接 之 后 . 在 【代码 】 视 图 中 将 会 显 
示 新 创建 的 脚本 链接 代码 。 


ldoctype htnl> 
xhtml> 














<head> 
ca charset="utf-8"> 
tle> 无 标题 文档 < /title> 


ead> 














javascript :Windows.closeO) ing src="3.jpg" width= 
Ta Ea 


绑 习 我 们 </a></p> 





9.3.3 创建 空 链接 


空 链接 是 未 指派 的 链接 ,用 于 向 页 面 上 的 对 象 
或 文本 附加 行为 。 例 如 , 可 向 空 链接 附加 一 个 行为 ， 
以 便 在 指针 滑 过 该 链接 时 交换 图 像 或 显示 绝对 定 
位 的 元 素 (AP 元 素 )。 

在 网 页 中 选择 链接 对 象 . 在 【属性 】 面 板 中 的 
【链接 】 文 本 框 中 . 输入 # ( 井 号 ) 即 可 。 


a RR 





























加 元 v 
已 缠 国 太守 对 中 四 人 站 


CB 





另外 . 用 户 也 可 以 在 【链接 ] 文本 框 中 , 输入 
“javascript:;” (javascript 后 面 依次 接 一 个 冒号 和 一 
个 分 号 ) 。 











入 无 ~ 
CEP HOL 





OE 原由 | Ga 


在 使 用 “javascript:; ”实现 空 链接 时 ， 则 


Internet Explorer 将 提示 “已 限制 此 网 页 运行 


可 以 访问 计算 机 的 脚本 或 ActiveX 控件 ”等 


内 容 。 


9.3.4 创建 文件 下 载 链接 


文件 下 载 链接 是 指 通过 链接 一 些 EXE 文件 或 


ZIP 文件 等 下 载 类 型 的 文件 ， 以 方便 用 户 对 该 链接 
文件 进行 直接 下 载 。 下 载 链 接 类 型 所 链接 的 文件 不 
支持 浏览 器 打开 ， 只 支持 文件 下 载 。 

创建 文件 下 载 链接 的 方法 和 创建 网 页 链接 的 
方法 完全 一 样 。 首 先 . 在 网 页 中 选择 链接 对 象 . 并 
单 击 【属性 】 面 板 中 【链接 】 文 本 框 后 方 的 【浏览 
文件 】 按 钮 。 








PR BR RP RE ) 











Rt bd 马 自 








然后 , 在 弹出 的 【选择 文件 】 对 话 框 中 
所 需 链 接 到 的 文件 ， 单 击 【 确 定 】 按 钮 即 可 。 





选择 
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文人 名 加: FXCalendar setup.exe 图 | 


| 站 点 根 目 录 | 


Dreamweaver CC 中 的 热点 链接 或 图 像 映 射 
链接 方法 ， 参 见 图 像 章节 中 的 “使 用 图 像 执 
点 ”内 容 。 





9.3.5 创建 锚 记 链接 


锚 记 链接 是 指 同 一 个 页 面 中 不 同位 置 处 的 链 
接 。 例 如, 在 网 页 标题 列表 中 设置 一 个 锚 点 , 并 在 
网 页 的 该 标题 相对 应 的 位 置 设置 一 个 锚 点 链接 , 从 
而 形成 一 个 锚 记 链接 状态 . 以 方便 用 户 通过 链接 快 
速 跳 转 到 所 需 浏览 的 位 置 。 

首先 ,需要 为 跳 转 到 的 浏览 位 置 处 添加 锚 点 。 
在 网 页 中 将 光标 定位 到 所 需 添 加 锚 点 的 位 置 , 切换 
到 【代码 】 视 图 中 ， 在 光标 处 输入 <a> 标 签 ， 并 在 
标签 中 添加 id 属性 设置 ,例如 锚 点 代码 <a name=" 
锚 点 " id-" 锚 点 "></a> 。 








工 “ldoctype htnl> 
2 <ht 


an 
</titte> 








此 时 . 返回 【设计 】 视 图 中 . 将 会 发 现在 光标 
处 插入 了 一 个 错 记 标识 。 
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创建 锚 记 链接 。 





用 户 可 通过 【属性 】 面 板 来 设置 锚 记 的 名 称 ， 
在 网 页 中 选择 需要 链接 到 锚 记 的 对 象 .并 在 【属性 】 
面板 中 的 【链接 ] 文本 框 中 输入 符号 # 和 锚 记 名 称 ， 











导航 条 是 每 个 网 页 必 不 可 少 的 ， 








是 最 常 


用 户 也 可 以 选择 需要 设置 锚 记 的 对 象 ， 在 


【属性 〗】 面 板 中 拖 动 【链接 】 文本 框 后 面 的 
【指向 文件 】 按 钮 ， 到 页 面 中 的 锚 记 上 即 可 。 





有 出 练习 : 制作 页 面 导航 条 


的 链接 方式 。 使 用 


导航 条 , 不 仅 可 以 增加 网 页 的 美观 性 , 而 且 还 可 以 节省 网 页 资源 、 
增加 网 页 内 容 。 在 本 练习 中 ， 将 详细 介绍 使 用 网 页 链接 功能 制作 
页 面 导航 条 的 操作 方法 和 实用 技巧 。 





操作 步骤 “》》》 
STEP|01 关联 CSS 样式 表 文件 。 新 建 空 白文 档 ， 
在 【代码 】 视 图 中 ， 更 改 网 页 标题 。 


创建 CSS 文件 
关联 CSS 文件 


插入 Div 
创建 链接 
使 用 项 目 列表 








打开 的 【CSS 设计 器 】 面 板 中 ， 单 击 【 添 加 CSS 
源 】 按 钮 ， 选择 【附加 现 有 的 CSS 文件 】 选 项 。 





CSS 设计 
弄 





工 “ldoctype htnl> 
<htnt> 
head> 
meta charset="utf-a"> 
园 :titte> 闭 字 科 技 -- 企 业 文 付 -/titte> 
</head> 






a body> 
9 </body> 
16 </html> 











3 
新 的 css 文件 























STEP|02 执行 【窗口 】| 【CSS 设计 器 】 命 令 . 























所 有 模式 : 列 出 整个 文档 的 规 则 








3 第 9 章 设置 网 页 链接 








STEP|03 在 弹出 的 【使 用 现 有 的 CSS 文件 ] 对 话 STEPI07 此 时 . 在 【属性 】 面 板 中 . 单 击 【 项 目 








框 中 ， 单 击 【 浏 览 】 按 钮 。 列表 】 按 钮 ， 并 在 【设计 】 视 图 中 输入 列表 内 容 。 
使 用 现 有 的 CSS 文件 | 





wu] De 


测 为 : 1%) 
Og 


> 有 条 件 使 用 (可 选 ) 
































STEP|04 在 弹出 的 【选择 样式 表 文 件 】 对 话 框 中 . 
选择 上 面 所 保存 的 CSS 文件 单 击 【确定 】 按 钮 。 

















| 省 本 |。 STEP|08 切换 到 【代码 】 视 图 中 ， 选 择 文本 “ 首 
页 在 【属性 】 面板 中 的 CSS 选项 卡 中 ,将 字体 
颜色 设置 为 HH 
Nn 
村 于 ; 文 倍 四 回 单 击 
文件 名 (Nk| maincss v msg: Cees) | 

















STEP105 制作 导航 页 。 在 【设计 】 视 图 中 . 执行 














0 I .em 



































{ 括 入 ] IDiv 命令 ， 在 弹出 的 【插入 Div] 对 话 枉 。 
> ss am | | 大 Na FT 
中 ， 输 入 ID 名 称 ， 单 击 【 确 定 】 按 钮 = ed 
插入 Div | 
mm [| STEPI09 然后 ,在 【属性 ] 面板 中 的 HTML 选项 
罗 单 击 | 
后 种 卡 中 ， 设 置 该 文本 的 链接 地 址 。 
新 建 CSs 规则 
1 
:四 
STEPI06 出 除 Div 标签 中 的 内 容 同时 执行 [ 括 。 | 
入 ] IDiv 命令 ， 在 弹出 的 【插入 Div] 对 话 框 中 ，。 轩 
输入 ID 名 称 ， 单 击 【 确 定 】 按 钮 。 5 | 








Dd .ie 




























on | 党 二 

=p [二 企画 Za CR 
帮助 

ID: v 








ee STEP|10 此 时 [代码 】 视图 中 将 显示 已 添加 的 链 
接地 址 ,在 该 链接 地 址 后 面 , 添加 表示 空 标题 的 代 
码 “tile="”。 























198 





网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 





STEP|12 最 后 ， 保 存 网 页 文档 ， 按 F12 键 在 浏览 
器 中 预览 最 终 效果 。 





STEP|11 使 用 同样 的 方法 .分别 为 其 他 列表 文本 
添加 链接 地 址 和 标题 属性 。 


了 <fhead> | 














1 练习 : 制作 网 站 引导 页 


网 站 引导 页 是 访问 者 刚刚 打开 网 站 时 显示 的 页 面 ， 可 以 是 文 
字 、 图 片 和 Flash 等 。 引 导 页 也 可 以 称 为 网 站 的 脸面 ， 其 设计 得 
是 否 好 ， 关 系 到 整个 网 站 的 精神 面貌 和 主题 思想 。 在 本 练习 中 
将 通过 导入 PSD 分 层 图 像 ， 来 制作 网 站 引导 页 。 
























插入 图 像 
设置 图 像 属 性 
DREAM COME TRL 设置 页 面 属性 
创建 图 像 热 点 
市 市 
sir 起 成 真 插入 Div 标签 
有 Am 
操作 步骤 “》》》 性 】 面 板 中 的 【页 面 属性 】 按钮 在 弹出 的 对 话 并 














STEPI01 设置 页 面 属性 . 新 建 空白 文档 . 单 击 【 属 ”中 设置 大 小 、 字 体 颜 色 和 边 距 值 。 





;网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 : 


(css) 











洪 第 9 章 


设置 网 页 链接 





STEP|05 然后 在 弹出 的 【保存 Web 图 像 】 对 话 
框 中 . 设置 保存 位 置 和 名 称 . 并 单 击 【 保 存 】 按钮。 























页 西宁 全 名): 回 点 字体 vl 四 
大 hl: 人 y 区 
文本 颜 名 (T) 












































STEP|02 然后 ,打开 【标题 /编码 】 选 项 卡 ， 设置 
【标题 】 选 项 ， 并 单 击 【 确 定 】 按 钮 。 








rr 
有 规 区 合成 ) ~ 
code 茯 名 (BID (8) 








六 4 天， 
CA” seompany 


2 [CR] wm | enw | 


STEP|03 设置 同步 图 像 。 执 行 【 插 入 】| 【图 像 】 
命令 , 在 弹出 的 【选择 图 像 源 文件 】 对 话 框 中 . 选 
择 图 像 文件 ， 单 击 【 确 定 】 按 钮 。 














文件 各 (IN): |bg,psd v 
站 点 扒 目 录 











STEP|04 在 弹出 的 【图 像 优 化 】 对 话 框 中 ， 设 置 
图 像 的 格式 、 品 质 等 参数 ， 并 单 击 【确定 】 按 钮 。 


[ec Vy] 


tt: Ee Cm 











RE Ole | 








| 站 点 根 目录 
各自 - 图 文 件 系统 
站 点 和 服务 器 
en ] OF 
和 个 改 日 区 类 型 
2015/5112 11:36 文件 夫 


hime 

















A TT 








STEP|06 此 时 ， 在 图 像 的 左上 角 ， 将 显示 【图 像 
已 同步 】 图 标 。 

















STEP|07 绘制 图 像 热 点 。 选 择 图 像 ， 在 【属性 】 
检查 器 中 . 单 击 【 和 矩形 热点 工具 】 按 钮 ,在 图 像 上 
的 “进入 网 站 ”处 绘制 一 个 矩形 。 























. 
E @ 给 制 
i 要 只 | | 
| 
E 作者 家 系 。 本 店 认 符 仅 们 观 刘 字 习 文 帝 之 周 ， 持 下 对 任 疝 资 天 只 法 律 责任 。 
< > 
上 9 I .wv 
E23 
B=, mm fers ne Om ~ me 
四 on wm pe HO se 
ET pO? 
Eee 














STEP|08 选择 该 矩形 热点 区 域 ， 在 【属性 】 检 查 
器 中 ,设置 【链接 】 为 yindaoye.html、【 目 标 】 为 
If 、【 蔡 换 】 为 “进入 网 站 。 








江 ; 网 页 制作 与 网 站 组 建 CC 2015 中 文 版 ) 从 新 手 到 高 手 





STEP|11 在 弹出 的 【# apDivl 的 CSS 规则 定义 】 
对 话 框 中 ,打开 【定位 】 选 项 卡 ， 设 置 相应 选项 ， 
并 单 击 【确定 】 按 钮 。 















v MM visibilityty] :| 


srt 























overtlow 四 
clip 

“区 Te 四 
直属 ido 


BottonllD) 






































vy) ut:[ “RE 


STEP|09 制作 Div 标签 . 执行 【插入 】|Div 命令 . Ga 上 


在 弹出 的 【插入 Div】 对 话 框 中 , 设置 ID 名 称 . [ ] 
并 单 击 【新 建 CSS 规则 】 按 钮 。 








STEP|12 最 后 . 在 Div 标签 中 输入 相应 的 文本 内 
容 即 可 。 


区 











STEP|10 然后 ,在 弹出 的 【新 建 CSS 规则 】 对 话 所 有 作品 六 人 员 提 供 下 上 当代 ， 折 可 归 不 作者 也有， 如 第 有 喜人 者 科 和 ,本 站 和 
框 中 直接 单 击 【确定 】 按钮 。 点 二 加 | 上 传 素材 | 版 权 什 起 | 联系 我 们 | 关于 我 们 ) 丈 污 社区 1 三 务 合作 











‖ 寺 二 品类 型 

为 css 元 反 上下文 对 反 关 闪 型。 
加 《 人 用 于 -个 JE 元 于 ) 
过 香 器 名 称 
选择 或 多 入 这 择 吕 名和。 
[el 


A 

















”9.6 | 新 手 训 练 营 


练习 1: 制作 百科 网 页 性 】 面 板 中 的 【页 面 设置 】 按 钮 ,设置 链接 颜色 和 网 
他 downloads\g\ 新 手 训练 营 \ 百 科 网 页 页 标题 。 同 时 ， 在 【代码 】 视 图 中 输入 CSS 样式 表 
提示 ， 本 练习 中 .首先 新 建 空白 网 页 ， 单 击 【 属 。 代码 
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章 ， 设 置 网 页 链接 








14 border:#CCC solid 2px; 


16 .tdtitle 


a 

la background-image:url(Inages/02.IP6); 
19 background-repeat:repeat-z5 

29 padding-left:1epx; 





21 font-size:15px; 
22 font -fanT1y:" 谎 钦 难 黑 。; 

3 font-wetght: boud; 

74 heioht: 79nx | 











然后 ， 在 网 页 中 插入 一 个 2 行 2 列 、 宽 度 为 800 
像素 的 表格 , 设置 表格 的 居中 对 齐 样式 。 同 时 . 合并 
相应 的 单元 格 , 关联 CSS 样式 . 插入 图 像 . 输入 文本 
并 设置 文本 的 字体 格式 和 链接 属性 。 























最 后 , 在 表格 下 方 再 插入 一 个 2 行 1 列 、 宽 度 为 
800 像素 的 表格 。 在 第 1 行 中 输入 标题 文本 ， 并 关联 
CSS 样式 表 。 随 后 , 在 第 2 行 中 插入 一 个 6 行 4 列 的 
表格 , 关联 CSS 样式 . 输入 文本 内 容 . 并 设置 文本 的 
链接 属性 。 








Fm 


日 





El 


5 <style type="text]css A 3 net charset="utr-8"> 5 
tbel 3。 <title; 稍 入 </tHtle> 

a 工 5 <style type="text/css"> 

9 border:#ccC sotid 2px; atbBI 

10 } a border :#8Abba4 solid lpx; 

11 #tbo2 9 font-weight:bold 

到 { 1 

13 margin-top: 5px; bezf 





border:saabba4 solid 1px; 
font-size:13px; 





</styte> 
5 </head> 








然后 .在 网 页 中 插入 一 个 2 行 1 列 、 宽 度 为 800 
像素 且 居 中 对 齐 的 表格 .并 将 该 表格 的 ID 设置 为 
tb01。 设 置 第 1 行 单元 格 的 高 度 、 对 齐 方式 和 背景 颜 
色 . 并 输入 标题 文本 。 同 时 ,在 第 2 行 中 插入 销售 网 
络 图 像 ， 并 设置 图 像 的 多 边 形 热点 区 域 。 





BT Ps TP ss PT RN PP TT 








< > 


最 后 , 在 tb01 表格 下 方 插入 一 个 5 行 1 列 、 宽度 
为 800 像素 且 居 中 对 齐 的 表格 .并 将 该 表格 的 ID 设 
置 为 tb02。 分 别 设置 每 行 单元 格 的 高 度 、 对 齐 方 式 和 
背景 颜色 ， 分别 输入 文本 并 设置 文本 的 链接 地 址 。 


i 














rr eer rt 


























练习 2: 制作 销售 网 络 页 
全 downloads\9\ 新 手 训练 营 \ 销 售 网 络 页 
提示 : 首先 . 新 建 空白 文档 ,在 【代码 】 视 图 中 
修改 网 页 标题 .并 输入 CSS 样式 代码 。 









rv Pr PT 


Ea 人. ~ 
站 01423678 01087654521 电子 测 认 inahai 2010 人 1 con 














EI 





练习 3: 制作 脚本 链接 
仿 downloads\9\ 新 手 训练 营 \ 脚 本 链接 
提示 :在 本 练习 中 .首先 新 建 一 个 空 自 文档 , 执 
行 [插入] | 【表格 ] 命令 . 插入 一 个 2 行 1 列 的 表格 . 








网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 








并 设置 表格 的 对 齐 方式 。 练习 4: 制作 文件 下 载 链接 

有 仿 downloads\g\ 新 手 训练 敬文 件 下 载 链 接 

EE 一 一 和 提示 : 在 本 练习 中 . 首先 新 建 一 个 空白 文档 , 插 
入 一 个 2 行 1 列 的 表格 ,设置 表格 属性 。 然 后 ， 在 第 
1 行 中 插入 一 个 Flash Video 文件 . 并 设置 播放 方式 和 





























| ES 影片 尺寸 。 
[一 一 二 

加 于 GE me a cli | Nis Bhar va FN 

一 ve | alspans 0 Border 





























告知 入 国内 Om 
下 








然后 .将 光标 定位 在 第 1 行 中 . 执行 【插入 】 
【媒体 】 IFlash Video 命令 ， 在 弹出 的 对 话 框 中 选择 
Flash 文件 ， 并 设置 播放 方式 和 影片 尺寸 。 单 击 【 确 
定 】 按 钮 ， 在 该 单元 格 中 插入 一 个 视频 文件 。 


EE 

















最 后 .在 第 2 行 中 插入 一 个 提示 下 载 文件 的 图 片 ， 
选择 图 片 , 在 【属性 】 面 板 中 单 击 【链接 】 后面 的 【 浏 
览 文件 ] 按钮 . 在 弹出 的 对 话 框 中 选择 下 载 文 件 即 可 。 

















EE - 


Hx 
































最 后 ， 将 光标 定位 在 第 2 行 中 ,执行 【插入 】 FF 加 STR 面 全 人 Aon | 站 二 上 录 
【图 像 】| 【图 像 】 命令 ， 插 入 一 个 关闭 图 像 。 同 时 ， ape 
在 【属性 】 面 板 中 ,将 【水 平 】 设 置 为 【 右 对 齐 】. 2 





将 【链接 】 设 置 为 “JavaScript:window.closeO”。 


免费 下 载 





























EE 
[FE ee vis | eH 
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党 网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 ::: 


[Eeei FEBUES 


[ET 
Sy 一 


在 网 页 中 适当 地 添加 一 些 多 媒体 元 素 , 可 以 给 浏览 者 的 听觉 或 视觉 带 来 强烈 的 震撼 . 从 而 可 以 给 用 
户 留 下 深刻 的 印象 。 在 网 页 中 可 以 插入 多 种 类 型 的 多 媒体 元 素 ， 例 如 网 页 中 的 背景 音乐 或 MTV 等 。 除 
此 之 外 , 还 可 以 向 网 页 中 添加 使 用 Shockwave 的 影片 以 及 各 种 插件 . 通过 使 用 这 些 元 素来 丰富 网 页 的 效 
果 、 增 强 页 面 的 可 视 性 。 本 章 将 详细 介绍 创建 多 媒体 页 面 的 基础 知识 和 实用 技巧 ， 以 帮助 用 户 制作 出 更 
加 完美 的 网 页 。 








网 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 





插入 Flash 





网 页 制作 与 网 站 组 建 CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 














Flash 是 由 Adobe 公司 推出 的 交互 式 矢 量 图 和 
Web 动画 的 标准 . 利用 它 可 以 创作 出 即 漂亮 又 可 以 
改变 尺寸 的 导航 界面 及 其 他 奇特 的 效果 . 是 目前 网 
络 上 最 流行 、 最 实用 的 动画 格式 。 


10.1.1 插入 Flash 动画 


Flash 动画 属于 SWF 格式 的 文件 .用户 可 以 在 
网 页 中 直接 插入 ， 并 通过 该 【属性 】 面 板 来 设置 
Flash 动画 的 各 项 属性 。 
1. 插入 普通 Flash 动画 

在 网 页 中 选择 插入 位 置 ， 执行 【 插 入 】 
|IHTMLIFlash SWF 命令 ; 或 者 在 【插入 】 面 板 中 ， 
选择 HTML 类 别 ， 单 击 Flash SWF 按钮 。 



































可 。 另 外 . 用户 也 可 以 直接 单 击 【 取 消 】 按 钮 ， 插 
入 Flash SWF 文件 。 








Tab 键 索引 - 


如 果 在 插入 对 象 时 不 想 输入 此 信息 ， 请 更 改 畏 
助 功能 -首选 他 数 。 














2. 设置 Flash SWF 文件 属性 
选择 插入 的 Flash SWF 文件 ,可 在 【属性 】 面 
板 中 设置 Flash SWF 的 相关 属性 。 


硅 主 
Wy) 550 f(D Corns 


Ti 0 
人 CD。 要 6) 品 且 (Q) 束 品 所 v] WHO | 
0 


Shinl.mf | 加 加 和 REG Ja 无 v| 
加 境 簿 他 ) 





【属性 】 面 板 中 的 各 选项 的 具体 含义 如 下 表 
































所 述 。 
ID 为 SWF 文件 指定 唯一 的 ID 
区 以 像素 为 单位 指定 影片 的 
宽度 和 高 度 
然后 ， 在 弹出 的 【选择 SWF】 对 话 框 中 ， 选 指定 SWF 文件 的 路 径 ， 单 
择 SWF 文件 ， 并 单 击 【确定 】 按 钮 。 文件 击 文件 天 图 标 可 以 浏览 指 
定 文件 
三 。 单 击 该 按钮 ， 可 以 在 弹出 的 
-| Be Flash 软件 中 ,编辑 影视 文件 
2 背景 颜色 指定 影片 区 域 的 背景 颜色 
启动 Flash 以 更 新 FLV 文 
才 本 编辑 件 ， 如 果 没有 安装 Flash， 
RNY: [Clear Shin lewf GN ET 四 则 此 按钮 被 禁用 
范 训 有 目录 Ca Class 用 于 对 影片 应 用 的 CSS 类 
启用 该 复 选 框 ， 可 使 影片 
和 连续 播放 
此 时 , 系统 会 自动 弹出 【对 象 标签 辅助 功能 属 en 
性 】 对 话 框 ， 设 置 相应 选项 ， 单 击 【 确 定 】 按 钮 即 。 自动 播放 面 时 将 自动 播放 影片 























续 表 
选 项 二 
BT 
垂直/ 水平 边 距 站 上 0 庆 下 必 
低 品 质 自动 以 最 低 品 质 播放 
Flash 动画 以 节省 资源 。 
a 检测 用 户 计算 机 ， 尽 量 以 
自动 佐 | 较 低 品 质 播 放 Flash 动画 
二 磺 | 以 节省 资源 
站 二  | 位 列 用 户 计算 机 ， 尽 主 以 
品质 较 高 品质 播放 Flash 动画 
以 节省 资源 
et 自动 以 最 高 品质 播放 
高 品质 
Flash 动画 
默认 显示 整个 Flash 动画 
使 影片 适合 设 定 的 尺寸 ， 
无 边框 “| 因此 无 边框 显示 并 维持 原 
比例 始 的 纵横 比 
严格 匹 对 影片 进行 缩放 以 适合 设 
和 定 的 尺寸 ， 而 不 管 纵横 比 
例如 何 
默认 方式 显示 Flash 动画 ， 
窗口 定义 Flash 动画 在 DHTML 
内 容 上 方 
定义 Flash 动画 不 透明 显 
WWmode | 不 迁 明 | 示 ， 并 位 于 DHTML 元 素 
王 广 
2 定义 Flash 动画 透明 显示 ， 
透明 > 
并 位 于 DHTML 元 素 上 方 
对 齐 设置 影片 在 页 面 中 的 对 齐 
方式 
定义 传递 给 Flash 影片 的 
2 各 种 参数 





3. 设置 透明 动画 
如 果 Flash 动画 没有 背景 图 像 . 则 可 以 在 【 属 
性 】 面 板 中 的 【人 参数】 选项 将 其 设置 为 透明 动画 。 
首先 ,插入 一 个 不 包含 背景 的 Flash 动画 . 保 
存 文档 。 在 正 浏览 器 中 浏览 Flash 动画 。 此 时 . 用 
户 会 发 现 该 动画 为 黑色 背景 ， 并 且 覆 盖 
图 像 。 





起 是 
日 未 
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然后 ， 在 Dreamweaver 文档 中 ， 
画 , 将 Wmode 选项 设置 为 【透明 】。 
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设置 完成 后 ， 再 次 保存 该 文档 ， 并 通过 正 济 
览 器 浏览 网 页 中 的 动画 效果 。 此 时 . 可 以 发 现 Flash 
动画 的 黑色 背景 被 隐藏 ， 网 页 背景 图 像 完全 显示 。 
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湛 东 不 分 开 ,后 未 有 一 天 ,有 
| 要 情 不 地 89 和 1! 


和 电信 希望 计 太 甸 ， 友 而 全 
有 什么 绝对 不 能 各 多 你 要 
要 










从 适 的 过 程 中 ， 








10.1.2 插入 Flash 视频 


FLV 是 一 种 新 的 视频 格式 ,全 称 为 Flash 
Video。 用 户 可 以 向 网 页 中 轻松 添加 FLV 视频， 而 
无 需 使 用 Flash 创作 工具 。 

1. 累进 式 下 载 视频 
累进 式 下 载 视频 是 将 FLV 文件 下 载 到 站 点 访 














网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 至 





局 于 











问 者 的 影片 上 ,然后 进行 播放 。 但 是 . 累进 式 下 载 
视频 方法 运行 允许 在 视频 下 载 完成 之 前 就 开始 播 
放 视 频 。 

选择 插入 视频 位 置 . 执行 【插入 ] IEITMLIElash 
Video 命令 ， 在 弹出 的 【插入 FLV】 对 话 框 中 . 单 












































“| we 
击 【浏览 】 按 钮 。 [sesa | | 
插入 FIV Ey 耳 、 - 了 
人 hE 最 后 . 在 【插入 FLV】 对 话 框 中 , 单 击 【 确 定 】 
La 按钮 ,文档 中 将 会 出 现 一 个 带 有 Flash Video 图 标 
URL[ Er E77 
(输入 FLV 文件 的 相对 或 绝对 路 公 ) 的 灰色 方 框 。 











外 现 : [中 ear Skin 1 ( 井 小 高 度 : 140) 


pHa 中 


突 魔 -| | 限制 高 寅 比 | 检测 大 小 
高 度 : 包括 外 现 : 
口 自动 播放 
口 自动 看 新 播放 
QD 。 要 看 视频 ， 请 在 齐 加 中 预 交 页 面 
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【插入 FLV】 对 话 框 中 ， 各 选项 的 具体 含义 如 此 时 , 用 户 可 以 在 【属性 】 面 板 中 , 设置 FLV 
下 表 所 述 。 文件 的 尺寸 、 文 件 URL 地 址 、 外 观 等 属性 。 
| 
选 项 这 义 天 以 "要 | i pe 1 二] 贡 度 | 上 
用 于 设置 视频 类 型 ， 包 括 【 累 进 a 
视频 类 型 式 下 载 视频 〗 和 【 流 视频 〗 两 种 
类 型 保存 该 文档 并 预览 效果 , 可 以 发 现 当 鼠标 经 过 
用 于 指定 FLV 文件 的 相对 路 径 或 。 ”该 视频 时 ,将 显示 播放 控制 条 ， 反 之 离开 该 视频 ， 
由 绝对 路 径 则 隐藏 播放 控制 条 。 
用 于 指定 视频 组 建 的 外 观 ， 可 通 Fen 总 ~- 国 - 本 部 - A)- 安 和 5- IRO- ” 
外 观 过 单 击 其 下 拉 按 钮 ， 在 下 拉 列 表 i 
中 选择 外 观 样式 
可 以 像素 为 单位 指定 FLV 文件 的 宽 
宽度 和 高 度 朗 和 高 度 
启用 该 复 选 框 ， 可 保持 视频 组 件 
隘 制 完 高 比 。 | 宽度 和 高 度 之 间 的 比例 不 变 
检测 天 小 用 于 确 完 PEV 文件 的 准确 宽度 和 
高 度 
自动 播放 启用 该 复 先 框 ， 可 以 在 页 面 打开 
时 自动 播放 FLV 文件 与 常规 Flash 文件 一 样 ,在 插入 FLV 文件 时 ， 
自动 重新 播放 启用 该 复 选 框 ， 可 以 重复 播放 Dreamweaver 将 插入 检测 用 户 是 否 拥 有 可 
FLYV 视频 查看 视频 的 正确 Flash Player 版 本 的 代码 。 





如 果 用 户 没有 正确 的 版 本 ， 则 页 面 将 显示 替 
然后 , 在 弹出 的 【选择 FLV] 对 话 框 中 , 选择 | 代 内 容 ， 提 示 用 户 下 载 最 新 版 本 的 Flash 


所 需 插 入 的 FLV 文件 。 了 Player。 
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2. 流 视频 续 表 
流 视频 是 对 视频 内 容 进行 流 式 处 理 . 并 在 一 段 选项 名 称 作 用 

可 确保 流畅 播放 的 很 短 的 缓冲 时 间 后 在 网 页 上 播 ”外观 指定 视频 组 件 的 外 观 , 所 选 外 观 的 预览 

放 该 内 容 。 会 显示 在 【外 观 】〗 弹 出 菜单 的 下 方 











选择 插入 视频 位 置 . 执行 【插入 ] |IHTMLIFlash 宽度 以 像素 为 单位 指定 FLV 文件 的 宽度 
高 度 以 像素 为 单位 指定 FLV 文件 的 高 度 





Video 命令 ,在 弹出 的 【插入 FLV】 对 话 框 中 . 将 
【视频 类 型 】〗 选 项 设置 为 【 流 视频 】. 设置 有 关 流 视 ”限制 高 宽 比 
频 的 相关 选项 ， 并 单 击 【 确 定 】 按 钮 。 


保持 视频 组 件 的 宽度 和 高 度 之 间 的 比 
例 不 变 。 默 认 情况 下 会 选择 此 选项 
指定 视频 内 容 是 否 是 实时 的 ， 启 用 






















































a 交加 项 输 | 流 旬 寺村 后 组件 的 外 现 上 只 会 显示 
CE 加 [ 音量 控件 ， 用 户 无 法 操纵 实时 视频 
服务 器 URL FDI ao 自动 播放 指定 在 Web 页 面 打开 时 是 否 播放 视频 
下 自动 重新 | 指定 播放 控件 在 视频 播放 完 之 后 是 
起 名 浆 和 播放 否 返回 起 始 位 置 
| 捷 冲 时 间 “| 掉 定 在 视频 开始 播放 之 前 进行 缓冲 
CD) 处 理 所 需 的 时 间 (以 秒 为 单位 ) 
宽度 600 回 限制 高 宽 比 | 检测 大 小 
人 设置 完成 后 ,文档 中 同样 会 出 现 一 个 带 有 
i Flash Video 图 标的 灰色 方 框 。 此 时 , 用户 还 可 以 在 
考 冲 时 间 . 办 【属性 】 面 板 中 ， 重 新 设置 FLV 视频 的 尺寸 、 服 务 
GE 本 
【插入 FLV】 对 话 框 中 的 各 选项 的 具体 含义 ， 
如 下 表 所 述 。 










选项 名 称 





指定 服务 器 名 称 、 应 用 程序 名 称 和 
实例 名 称 
指定 想 要 播放 的 FLV 文件 的 名 称 。 
扩展 名 .flv 是 可 选 的 


i | 2 | 插入 HTML5 媒体 


新 版 的 Dreamweaver 除了 可 以 插入 Flash 动画 ”网 页 中 的 标准 方式 。 在 网 页 中 选择 音频 放置 位 置 . 
和 视频 之 外 ,还 可 以 插入 HTML5 媒体 包括 ” 单 击 【 插 入 】 面 板 中 的 HTML5 Audio 按钮 ， 音 频 
HIMLS 音频 和 HIMLS 视频 两 种 类 型 的 媒体 。 会 自动 插入 到 指定 位 置 ， 并 以 图 标的 形式 进行 显 





服务 器 URI 


FLY W P30 | 回忆 训 宽 比 。 生涯 | 可 务 器 URI 

Fir] wer | HE ] 包括 外 天 :0007500 3 

口 和 a 和 太 矣 RP 时间 » 六 责 ve shin ; (最 4 寅 度 ; 140) ~| 
站 新 揪 放 | 到 时 视 央 先入 上 所 示 | 显示 所 要 的 区 件 。 









































10.2 1 插入 HTML5 音频 ee 【代码 】 视 图 中 将 显示 有 关 音 频 的 HIML 


HIMLS 音频 元 素 提 供 一 种 将 音频 内 容 谋 入 到 
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插入 HIMLS 音频 之 后 , 在 网 页 中 只 显示 了 音 
频 图 标 。 此 时 ， 用 户 还 需要 在 【属性 】 面 板 中 单 击 
【 源 】 按 钮 右 侧 的 【浏览 】 按 钮 。 在 弹出 的 【选择 
音频 】 对 话 框 中 ,选择 音频 文件 单 击 【确定 】 按 
钮 即 可 。 




















MP3 文 件 30K| v 
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除了 设置 【 源 】 选 项 之 外 ,用户 还 可 以 在 【 属 
性 】 面 板 中 设置 其 他 属性 选项 。 





enass .Joe 


Contals 上 Auooay Pralood [eee 
toop 7 meg 








其 中 , 在 【属性 】 面 板 中 , 除了 有 【 源 】、[【Alt 
源 1] 和 【Alt 源 2] 选项 之 外 . 还 有 下 列 几 个 选项 。 
口 Title (标题 ) 用 于 设置 音频 文件 的 标题 。 
口 回 退 文本 ”用 于 设置 在 不 支持 HTML5 的 
浏览 器 中 显示 的 文本 。 
口 Controls (控件 ) 启用 该 复 选 框 ， 可 以 
在 HIML 页 面 中 显示 音频 控件 。 
口 Loop〔 循 环 音频 ) ”启用 该 复 选 框 ,可 以 





连续 播放 音频 。 
口 Autoplay (自动 播放 ) 启用 该 复 选 框 ， 
在 加 载 网 页 时 便 自动 播放 音频 。 


口 Muted (静音 ) ”启用 该 复 选 框 ， 表示 下 





: 网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 


载 言 频 之 后 该 音频 为 静音 状态 。 

口 Preload ( 预 加载 ) ”用 于 设置 下 载 时 音频 
的 加 载 内 容 ， 选 择 auto (自动 ) 选项 ， 则 
在 页 面 下 载 时 加 载 整个 音频 文件 ; 选择 
metadata (元 数据 ) 选项 ， 则 在 页 面 下 载 
完成 之 后 仅 下 载 元 数据 。 

设置 各 属性 选项 并 保存 网 页 后 . 按 F12 键 即 可 

在 浏览 器 中 预览 音频 效果 。 








D》 | © | 0 i x | 二 “ 
poe 335%6 qd) ee 
章 猜 你 喜欢 历 驳 加 吴 下载 Q100% .4 





10.2.2 插入 HTML5 视频 


HTMLS5 视频 元 素 提 供 一 种 将 电影 或 视频 说 入 
网 页 中 的 标准 方式 。 在 网 页 中 选择 视频 放置 位 置 ， 
单 击 【 插 入 】 面 板 中 的 HTML5 Video 按钮 ， 视 频 
会 自动 插入 到 指定 位 置 ， 并 以 图 标的 形式 进行 显 
示 . 同 时 在 【代码 ] 视 图 中 将 显示 有 关 视 频 的 HIML 
































插入 HTML5 视频 之 后 . 网 页 中 只 显示 了 视频 
图 标 。 此 时 ， 用户 还 需要 在 【属性 】 面 板 中 设置 各 
属性 选项 。 


EE:3 
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其 中 . 在 【属性 】 面 板 中 . 除了 有 用 于 设置 视 
频 地 址 的 【 源 】、[Alt 源 1】 和 【Alt 源 2】 选 项 之 
外 . 还 包括 下 列 几 个 选项 。 





口 Title (标题 ) 用 于 设置 视频 文件 的 标题 。 

口 W (宽度 ) 和 了 H (高 度 ) ”以 像素 为 单位 
设置 视频 的 宽度 和 高 度 。 

口 Poster (海报 ) “用 于 设置 视频 完成 下 载 
后 或 单 击 【 播 放 】 按 钮 后 所 显示 的 图 像 的 
地 址 。 

口 回 退 文本 用 于 设置 在 不 支持 HIMLS 浏 
览 器 中 所 显示 的 文本 。 

口 Controls (控件 ) ”启用 该 复 选 框 ， 
在 HTML 页 面 中 显示 视频 控件 。 

口 Loop (循环 视频 ) ”启用 该 复 选 框 , 可 以 


可 以 


连续 播放 视频 。 
口 Autoplay (自动 播放 ) 启用 该 复 选 框 ， 
在 加 载 网 页 时 便 自动 播放 视频 。 


口 Muted (静音 ) ”启用 该 复 选 框 ， 表示 下 
载 诗 频 之 后 该 音频 为 静音 状态 。 

口 Preload ( 预 加 载 ) ”用 于 设置 下 载 时 视频 
的 加 载 内 容 ， 选 择 auto (自动 ) 选项 ， 则 
在 页 面 下 载 时 加 载 整 个 视频 文件 ; 选择 
metadata (元 数据 ) 选项 ， 则 在 页 面 下 载 
完成 之 后 仅 下 载 元 数据 。 

口 Flash 回 退 用 于 设置 对 于 不 支持 
HTML5 视频 的 浏览 器 所 使 用 的 SWF 文件 
地 址 。 


10.2.3 ”HTML5 媒体 属性 


当 用 户 插入 HIML5 媒体 后 . 会 发 现 系统 是 使 
用 HIML5 中 的 <video> 标 签 和 <audio> 标 签 来 播放 
音频 和 视频 文件 的 。 其 中 ，<video> 标 签 专门 用 来 
播放 视频 文件 或 电影 ， 而 <audio> 标 签 专门 用 来 播 
放 音 频 文 件 。 

在 支持 HIMLS 的 浏览 器 中 ,使 用 <video> 标 
签 和 <audio> 标 签 播放 音频 视频 文件 ， 不 需要 安装 
插件 ,浏览 器 可 以 直接 识别 。 

在 HIML5 中 ,使 用 <audio> 标 签 与 <video> 标 
签 播放 音频 视频 文件 , 具有 的 属性 大 致 相同 , 其 详 
细 介 绍 如 下 所 述 。 
1. Src 属性 

Src 属性 主要 用 于 设置 音频 视频 文件 的 URL 
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地 址 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>src 属性 应 用 </title> 

</head> 

<body> 

<h5>src 属性 应 用 </h5> 
<audio src="sky.o0gg" controls> 
</audio> 

</body> 

</html> 


上 述 代码 中 , 在 <audio> 标 签 中 . 使 用 src 属性 





指定 音频 文件 的 URL 地 址 。 
DIO src 属 性 应 用 和 =) 
src 属 性 应 用 


稍 你 喜 次 摧 ” 交加 于 器 ”下载 100% 





2. Preload 属性 

Preload 属性 默认 为 只 读 ， 主 要 用 于 指定 在 浏 
览 器 中 播放 音频 和 视频 文件 时 . 是 否 对 数据 进行 预 
加 载 。 如 果 是 的 话 , 浏览 器 会 预先 对 视频 或 音频 文 
件 进行 缓冲 ,这 样 可 以 提高 播放 的 速度 。 

Preload 属性 有 三 个 可 选 值 ， 包 括 none、 
metadata 与 auto, 默认 值 为 auto。none 表示 不 进行 
预 加 载 : metadata 表示 只 预 加 载 媒体 的 元 数据 ( 媒 
体 字 节 数 、 第 一 帧 、 插 入 列表 、 持续 时 间 等 ) ;auto 
表示 加 载 全 部 视频 或 音频 。 

使 用 方法 如 下 : 











< _ audio src="sky.ogg"” preload= 
"auto"></ audio > 


3. Poster 属性 
Poster 属性 为 <video> 标 签 的 独 有 属性 ， 主 要 
用 于 当 视 频 不 可 用 时 . 使 用 该 标签 展示 一 幅 代 用 的 








图 片 。 使 用 方法 如 下 : 


<video src=”sky.ogv” poster=”tpl. 
jpg”></video> 
4. Autoplay 属性 
该 属性 主要 用 于 指定 在 页 面 中 加 载 音频 视频 
文件 后 ,设置 为 自动 播放 。 














<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>autoplay 属性 应 用 </title> 

</head> 

<body> 

<h5>autoplay 属性 应 用 </h5> 
<audio src="sky.0gg" controls 
autoplay="true" ></audio> 

</body> 

</html> 


在 上 述 代 码 中 , 使 用 autoplay 属性 将 ogg 视频 
文件 加 载 到 页 面 中 。 








|》 ”QO 〇 | 口 autoplay 必 性 应 用 + 已 > 
autoplay 属 性 应 用 
捕 你 可 后。 贡 加 加 器 下载 





5. Loop 属性 
该 属性 主要 用 于 设置 是 否 循环 播放 视频 或 音 
频 文 件 ， 使 用 方法 如 下 : 























< audio src=”sky.0gg” autoplay 

loop></ audio > 
6. Controls 属性 

该 属性 主要 用 于 设置 是 否 为 视频 或 音频 文件 
添加 浏览 器 自 带 的 播放 控制 条 。 该 控制 主要 包括 播 
放 、 暂 停 和 音乐 控制 等 功能 。 使 用 方法 如 下 : 














<audio src=”sky.0gg” controls > 
</ audio > 
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7. Width 和 height 属性 
该 属性 主要 用 于 设置 视频 的 宽度 和 高 度 , 以 像 
素 为 单位 ， 使 用 方法 如 下 : 





<video src=”sky.ogv” width="300" 
height="200" ></video> 


8. NetworkState 属性 

默认 属性 为 只 读 ， 当 音频 或 视频 文件 在 加 载 
时 ， 可 以 使 用 <video> 标 签 或 <audio> 标 签 的 
networkState 属性 读 取 当 前 的 网 络 状 态 。 
9. Error 属性 

在 播放 音频 和 视频 文件 时 ， 如 果 出 现 错误 ， 
error 属性 将 返回 一 个 MediaError 对 象 , 该 对 象 有 5 
种 错误 状态 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Error 属性 应 用 </title> 
<script> 
function err() 
i 
var audio = document. 
getElementById ("Audiol1"); 
audio.addEventListener 
("error", function (){ 
switch (audio.error.code) 
{ 
case MediaError.MEDIA 
ERROR ABORTED: 
aa.innerHTML=" 音 频 的 下 载 过 程 被 
终止 "> 
break; 
case MediaError.MEDIA 
ERROR NETWORK: 
aa. innerHTML=" 网 络 发 生 故 障 , 音频 
的 下 载 过 程 被 中 止 "7 
break; 
case MediaError.MEDIA 
ERROR DECODE: 
aa.innerHTML=" 解 码 失败 "; 


break; 


case MediaError.MEDIA 
ERROR SRC NOT 


SUPPORTED: 
aa-innerHTML=" 不 支持 播放 的 视频 
格式 "; 

break; 
default: 
aa.innerHTML=" 发 生 未 知 
错误 "7 
} 

},false); 
aa.innerHTML="error 属性 未 发 现 错 
放 " 

} 
</script> 
</head> 


<body onload="err()"> 

<h5 id="aa"></h5> 
<audio id="Audiol" 
controls></audio> 

</body> 

</html> 


src="sky.0gg" 





上 述 代 码 中 ， 页 面 加载 时 ,会 触发 err0 事 件 。 
Err0 事 件 读 取 ogg 视频 文件 ， 使 用 error 属性 返回 
洪 误 信息 。 如 果 没有 出 现 错误 ， 则 显示 “eror 属 
性 未 发 现 错误 "， 否则 ， 显 示 相 应 的 错误 信息 。 




















1》 | 口 Error 属 性 应 用 + 反 >” 


发 生 未 知 错误 





10. ReadyState 属性 

可 以 使 用 <video> 标 签 或 <audio> 标 签 的 
readyState 属性 返回 媒体 当前 播放 位 置 的 就 绪 状 
态 . 共有 5 个 可 能 值 。 
11. CurrentSrs 属性 

默认 属性 为 只 读 . 主要 用 于 读 取 播 放 中 的 音频 
或 视频 文件 的 URL 地 址 。 
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12. Buffered 属性 

属性 为 只 读 , 可 以 使 用 <video> 标 签 或 <audio> 
标签 的 Buffered 属性 来 返回 一 个 对 象 , 该 对 象 实现 
TimeRanages 接口 ， 以 确认 浏览 器 是 否 已 缓冲 媒体 
数据 。 
13. Paused 属性 

该 属性 主要 用 来 返回 一 个 布尔 值 , 表示 是 否 处 
于 暂停 播放 中 ，true 表示 音频 或 视频 文件 暂停 播 
放 ，false 表示 音频 或 视频 文件 正在 播放 。 





























<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>paused 属性 应 用 </title> 
<script> 
function toggleSound() { 
var Audiol = document. 
getElementById ("Audiol1"); 
var btn = document. 
getElementById ("btn"); 
if (Audiol.paused) { 
Audiol.play(); 
btn.innerHTML = "暂停 "; 
} 
else { 
Audiol .pause (); 
btn.innerHTML =" 播 放 "; 
} 
} 


</acript> 

</head> 

<body> 

<h5>paused 属性 应 用 </h5> 
<audio id="Audiol" src="sky.ogg" 
controls></audio> 


<br/> <br/> 
<button id="btn" onclick= 
"toggleSound () "> 播放 </button> 
</body> 
</html> 





通过 浏览 器 ,用户 可 以 单 击 按钮 来 控制 音频 文 
件 当前 是 播放 状态 .还 是 暂停 状态 。 
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汪 : 网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 
网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 
pio paused 尾 性 应 用 + 所 2 ("video"); 
paused 属 性 应 用 有 0 
CE function pause() 
。 
播放 
Video = document .getElementById 
狂人 喜欢 历 ” 驳 加 器 由 下 载 Q 100 ("video™"); 
video.pause(); 
10.2.4 ”HTML5 媒体 方法 } 
</script> 
<video> 标 签 与 <audio> 标 签 都 具有 以 下 4 种 方 </head> 
法 。 <body> 
1. Play 方法 <video id="video" autobuffer= 
使 用 play 方法 播放 音频 或 视频 文件 。 在 调用 "true"> 
该 方法 后 ，paused 属性 的 值 变 为 false。 <source src="4.0gv" type= 
2.Pause 方 法 'video/ogg; codecs="theora, 


vorbis"'> 


使 用 pause 方法 暂停 播放 音频 或 视频 文件 . 在 




















</video> 
调用 该 方法 后 ，paused 属性 的 值 变 为 true。 中 
~ p> 

3. Load 方法 <input name="play" type="button" 

使 用 Load 方法 重新 载 入 音频 或 视频 文件 ， 进 onClick="play ()"” value=" 播 放 "> 
行 播放 .这 时 ,标签 的 error 值 设 为 null playbackRat <input name="pause" type= 
属性 值 变 为 defaultPlaybackRate 属性 值 。 "button" onClick="pause()" 
4. CanPlayType 方法 value= "暂停 "> 

使 用 canPlayType 方法 来 测试 浏览 器 是 否 支持 省 
要 播放 的 音频 或 视频 的 文件 类 型 ， 语 法 如 下 ， 人 

</html> 


Var support = videoElement. 


ee 在 上 述 代码 中 ， 向 网 页 中 插入 一 段 ogv 视频 ， 


通过 单 击 【 播 放 】 或 【和 暂停】 按钮 实现 视频 的 播放 
VideoElement 表示 <video> 标 签 或 <audio> 标 或 暂停 功能 。 

签 。 方 法 中 使 用 参数 type ,来 指定 播放 文件 的 
MIME 类 型 。 





open 








<!DOCTYPE HTML> 


<html> 

<head> 

<meta charset="utf-8"> 
<title> 视 频 播放 </title> 
<script> 


var video; 

function Play() 

{ 

Video = document .getElementById 




















2 
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10.2.5 HTMLS5 媒体 事件 续 表 
名 称 描 述 
在 页 面 中 , 对 视频 或 音频 文件 进行 加 载 或 播放 浏览 器 能 够 播放 媒体 ,但 估计 以 
时 ,会 触发 一 系列 事件 。 用 户 可 以 使 用 JavaScript _ Canplay 当前 播放 速率 不 能 直接 将 媒体 
脚本 捕捉 该 事件 并 进行 处 理 。 事件 的 捕捉 和 处 理 主 ll 
要 使 用 <video> 标 签 和 <audio> 标 签 的 Durationchange | 播放 时 长 被 改变 
人 u i Volume 属性 (音量 ) 被 改变 或 
- 方法 对 行 监 五 > 
addEventListener 方法 对 触发 事件 进行 监听 . 语法 _ volumechange ee 
ps 测 蜗 器 能 名 播放 媒体， 而 且 以 当 
videoElement .addEventListener Canplaythrough i 率 能 够 吾 长 六 主体 扩 
(type, listener,useCapture); 放 完 华 ， 不 再 需要 进行 缓冲 
Seeking 属性 变 为 tue， 浏 览 器 
上 述 代码 中 .videoElement 表示 <video> 标 签 Ss 正在 请 求 数据 
和 <audio> 标 签 ，type 表示 事件 名 称 ，listener 表示 Progress 浏览 器 正在 获取 媒体 数据 
绑 定 的 函数 ，useCapture 表示 事件 的 响应 顺序 , 是 。 Susnend 浏览 器 暂停 获取 媒体 数据 ,但 是 
一 个 布尔 值 。 下 下 载 过 程 并 没有 正常 结束 
在 使 用 <video> 标 签 与 <audio> 标 签 播放 视频 ”Eee 2 -一 二 
成 立 Ss lefaultplaybackRate 默 记 
或 音频 文件 时 . 触发 的 一 系列 事件 介绍 如 下 表 Ratechange 播放 速率 ) 或 playbackRate 属性 
所 示 。 (当前 播放 速率 ) 被 改变 
名 称 i ee 浏览 器 开始 在 网 上 寻找 媒体 数 
播放 暂停 ， 当 执行 了 pause 方法 据 
Eon 时 触发 Stalled 浏览 器 朗 试 获取 媒体 数据 失败 
浏览 器 获取 完毕 媒体 的 时 间 长 即将 开始 播放 ， 当 执行 了 play 
Loadedmetadata 和 字 节 数 可 方法 时 触发 ,或 数据 下 载 后 标签 
浏览 器 已 加 载 完 毕 当 前 播放 位 | 被 设 为 autoplay (自动 播放 ) 属 
Toadeddata 。 | 置 的 媒体 数据 ， 准 备 播放 性 
播放 过 程 由 于 得 不 到 下 一 帧 而 ee 
Waiting 暂停 播放 , 但 很 快 就 能 够 得 到 下 
一 由 <html> 
浏览 器 在 下 载 完 全 部 媒体 数据 Ee 
Abort 之 前 中 止 获取 媒体 数据 ， 但 是 并 ee ee 
不 是 由 错误 引起 的 <title> 捕 捉 事 件 </title> 
Loadstart 浏览 器 开始 在 网 上 寻找 媒体 数据 <script> 
Seeking 属性 变 为 false， 浏 览 器 var video; 
sd 停止 请 求 数 据 function play() { 
当前 播放 位 置 被 改变 , 可 能 是 播 video = document. 
ee 放 过 程 中 的 自然 改变 , 也 可 能 是 getElementById ("video"); 
a 被 人 为 地 改变 ,或 由 于 播放 不 能 video.addEventListener 
连续 而 发 生 的 跳 变 Cr 
Error 获取 媒体 数据 过 程 中 出 错 I 
| SE getElementById("catchs"); 
网 络 突然 变 为 未 初始 化 状态 catchs .innerHTML=" 捕 捉 到 pause 
Playing 正在 播放 











eeee 
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事件 "; vorbis"'> 
}, false); </video> 

video.addEventListener ("play", <input name="play" type="button™ 

function(){ onClick="play () ”value=" 播 放 "> 
catchs = document. <span id="catchs"></span> 
getElementById("catchs"); </body> 
catchs .innerHTML=" 捕 提 到 play </html> 
事件 "; 
全 在 上 述 代码 中 .为 页 面 添加 视频 播放 和 暂停 的 
if(video.paused) { 事件 捕捉 功能 。 当 用 户 单 击 【 播 放 】 按 钮 播放 视频 

video.play(); 时 ,会 自动 捕捉 事件 。 

} Ta - 一 一 


else { eB ee 





Video.pause(); 


} 

</script> 

</head> 

<body> 
<video id="video" autobuffer= 
"true"> 


<source src="4.0gv" type= 








"video/ogg codecs="theora, 


| [| 玉昌 插入 其 他 媒体 对 象 


在 Dreamweaver 中 ,除了 通过 HTML5 和 Flash 
方式 插入 动画 和 视频 之 外 , 还 可 插入 其 他 格式 的 视 
频 、 音 频 文件 ， 以 及 Edge Animate 文件 。 


10.3.1 插入 Edge Animate 











Dreamweaver 运行 用 户 导 入 Adobe Edge 
Animate 排版 (OAM 文件 ) ， 以 方便 用 户 轻松 使 用 
Adobe Edge Animate 软件 开发 的 HTML 应 用 . 减 
轻 了 用 户 编写 代码 的 繁琐 工作 。 导入 OAM 文件 之 后 ,在 网 页 中 将 显示 OAM 

在 网 页 中 . 选择 OAM 文件 放置 位 置 . 在 【 插 ”文件 图 标 。 同时 ,用户 可 以 在 【属性 】 面 板 中 设置 
入 】 面 板 中 ， 单 击 【Edge Animate 作品 】 按 钮 。 在 ”OAM 文件 的 ID、 宽 度 和 高 度 等 属性 。 
弹出 的 【选择 Edge Animate 包 】 对 话 框 中 .选择 
OAM 文件 ， 单 击 【确定 】 按 钮 即 可 。 



































214 





: :网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 





:第 10 章 设计 多 媒体 网 页 








SEE 








宽度 和 高 度 值 ， 来 调整 音频 文件 的 大 小 。 
2. 插入 视频 文件 

首先 . 在 网 页 中 选择 插入 位 置 。 然后. 执行 【 插 
入 】IHTMLI【 插 件 】 命 令 ， 或 者 单 击 【 插 入 】 面 
板 中 的 【插件 】 按 钮 。 


FRITTERS 
| 
国 吕 “Pn as 元 下 四 ea 

市 | | 高 00 E00 
































10.3.2 ”插入 媒体 插件 


Dreamweaver 为 用 户 提 供 了 “插件 ”功能 . 以 
方便 用 户 将 计算 机 中 的 音频 和 视频 文件 嵌入 到 网 
页 中 


1. 插入 音频 文件 然后 , 在 弹出 的 【选择 文件 】 对 话 框 中 , 选择 
首先 , 在 网 页 中 选择 插入 位 置 。 然后 执行 【 插 ”需要 插入 到 网 页 中 的 视频 文件 ， 并 单 击 【 确 定 】 

入 】IHTMLI【 插 件 】 命 令 ， 或 者 单 击 【 插 入 】 面 按钮 。 

板 中 的 【插件 】 按 钮 。 
































1 区 攻 , 


动感 视频 











中 进兵 





Ee 























然后 , 在 弹出 的 【选择 文件 】 对 话 框 中 ,选择 
需要 插入 到 网 页 中 的 音频 文件 ， 并 单 击 【 确 定 】 此 时 , 在 网 页 中 将 显示 插入 的 视频 文件 。 用 户 
可 在 【属性 】 面 板 中 设置 视频 文件 的 属性 , 例如 设 
置 宽度 和 高 度 值 ， 来 调整 视频 文件 的 大 小 。 


























此 时 , 网 页 中 将 显示 插入 的 音频 文件 。 用 户 可 
在 【属性 】 面 板 中 设置 音频 文件 的 属性 . 例如 设置 
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0.4 


: 网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 : 








练习 : 制作 音乐 播放 网 页 


在 很 多 休闲 和 娱乐 的 网 站 中 都 添加 有 Flash 音乐 ， 可 以 实现 
播放 、 暂 停 、 快 进 和 后 退 等 功能 ， 使 网 站 给 访问 者 一 种 轻松 舒适 
的 感觉 。 在 本 练习 中 ， 将 通过 制作 一 个 个 人 空间 网 页 ， 来 详细 介 


绍 制 作 音 乐 播放 网 页 的 操作 方法 。 





练习 要 点 
插入 Div 标签 
插入 图 像 
插入 表格 
设置 表格 属性 
关联 CSS 文件 
绘制 图 像 热点 
使 用 媒体 插件 








\ 











操作 步骤 “》》》 
STEP|01 设置 网 页 标题 。 新 建 空白 文档 ， 在 【 代 
码 】 视 图 中 ， 将 网 页 标题 更 改 为 “个 人 空间 。 


工 <ldoctype htnl> ry 
2 <html> 


re 
cts caraaraiutr- ee» 
te ep 2 
6 /heed> 

boayy 
加 oo 
18 </html> 


STEP|02 关联 Css 文件 。 执 行 【窗口 】| 【CSS 
设计 器 】 命 令 ， 单 击 【添加 CSS 源 】 命 令 ， 选择 
【附加 现 有 的 CSS 文件 】 选 项 。 


Css 











加 单 击 上 有 | 荆 区 
3 
ce 
附加 对 有 的 css 文件 
ER 











加 选择 








抽打 : 
aas | 


用 
所 有 模式 ; 列 出 蓝 个 文档 69 规 风 

















STEP|03 在 弹出 的 【使 用 现 有 的 CSS 文件 】 对 话 
框 中 , 单 击 【 浏 览 】 按 钮 。 











使 用 现 有 的 CSS 文件 
交 伯 a 一 天 
i 
Oo 
* 有 条 件 使 用 (可 选 ) 
| 者 助 耶 消 | 这 | 
































STEP|04 然后 . 在 弹出 的 【选择 样式 表 文件 】 对 
话 框 中 ,选择 CSS 样式 表 文 件 ， 并 单 击 【 确 定 】 



































EE 选 芭 样式 表 文 件 | 
© + 7 ， 理 乐 潘 故 网 页 v6 污 系 "喜乐 了 拭 放 网 页 " » | 
组 织 ”新 建文 件 夫 性 |*| 回 @@ 
Bimages 
mr 
文 村 SN jind "| cs v 
站 点 根 录 [Cs] | 了 























STEP|05 插入 媒体 。 执 行 【插入 】|Div 命令 . 在 
弹出 的 【插入 Div】 对 话 框 中 ,输入 ID 名 称 . 单 
击 【 确 定 】 按 钮 。 











STEP|I06 然后 ,执行 【插入 】IHTMLI【 插 件 】 命 
令 , 在 弹出 的 【选择 文件 】 对 话 框 中 , 选择 媒体 文 
件 ， 单 击 【确定 】 按 钮 。 





个 | 机 < 7 音乐 对 放风 页 。 v C | 。 列 幸 " 富 乐 基 丰 网 而 ” 门 


给 ”新 建文 件 到 时 > 回 @ 


9 
“| pe 3 
[smaa | [ w= 


文 # 名 (Ni |2mp3 


| 








第 10 章 设计 多 媒体 网 页 





表格 大 小 










































































STEP|07 选择 该 媒体 插件 ， 在 【属性 】 面 板 中 设 
置 其 【 宽 】 【高 】 和 【垂直 边 距 】 属 性 。 





STEP|10 选择 第 1 行 中 的 三 个 单元 格 , 在 【属性 】 
面板 中 将 【高 】 设 置 为 121， 并 单 击 【 合 并 所 选单 
元 格 】 按 钮 ， 合 并 所 选单 元 格 。 




















STEP|08 制作 版 头 部 分 。 执 行 【插入 】| 【表格 】 
命令 , 在 弹出 的 【表格 】 对 话 框 中 , 设置 表格 尺寸. 
单 击 【确定 】 按 钮 。 












































STEP|11 将 光标 定位 在 合并 后 的 单元 格 中 .执行 
【插入 】| 【图 像 】| 【图像 】 命 令 ， 选择 图 像 文件 
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单 击 【确定 】 按 钮 。 击 【 确 定 】 按 钮 。 


erE | 
(Nk: 1pg "| "jpeg k 3jpg se¥f Cgit"jpgrjpeg"p Y 
站 AI 日 录 | 型 
































STEP|12 制作 图 像 热 点 。 选 择 第 2 行 第 1 列 的 单 。 STEP|15 制作 主体 内 容 。 在 【属性 】 面 板 中 ， 单 

元 格 ， 在 【属性 】 面 板 中 将 【高 】 设 置 为 230, 同 ” 击 【页 面 属性 】 按 钮 。 在 弹出 的 【页 面 属性 】 对 话 

时 插入 一 个 图 片 。 框 中 , 设置 【大 小 】 和 【文本 颜色 】， 并 单 击 【 确 
定 】 按 钮 。 











页 字体 人 ) 器 冉 兴 字 体 


痛 景 忆 色 's) 国 \ 
基本) Er 
重要 全) v 


ww 0 | 0):p | 


bbs | Ee 
Y 


[ 现 呵 ] [这 ][ 到 [me] 











STEPI13 选择 图 片 ， 在 【属性 】 面 板 中 单 击 【 回 ”STEP|16 在 第 2 行 第 2 列 单元 格 中 ， 插 入 一 个 名 
形 热点 工具 】 按 钮 ， 在 图 片 中 绘制 图 像 热 点 。 为 apDivl 的 Div 标签 , 并 在 标签 内 输入 文本 内 容 。 















” ae eT Ble 
Wr 称 : 心静 如 水 





l 朴 ， 秘 天 达观 ， 熟 厚 大 气 ， 












































STEP| 们 选择 第 2 行 第 3 列 的 单元 格 . 执行 【 插 
入 】| 【图 像 】| 【图 像 】 命 令 . 选择 图 片 文件 单 
击 【确定 】 按 钮 。 


STEP|14 选择 第 2 行 第 2 列 的 单元 格 ， 执 行 【 插 
入 】| 【图像 】| 【图像 】 命 令 ， 选择 图 片 文 件 ， 单 
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该 单元 格 中 插入 图 片 images/5.jpg。 
站“ 计 需 网 页 ，images v | 局 | | 天 二 mages 六 i ps 
Eg 培训 </p> 
-ee 二 攻 证 依 ， 浓 和 
和 训 人 
， 入 艺 术 ， 济 于， 购物 ， 
上 网 ， 读书 夺 志 ， 健 来 </p> 
46 <p> 喜 欢 的 三 动 : 体 澡 , 瑜 人 向 ， 自 行车 ， 祖 绽 </p> 


41 </div> 







6" height="414" alt 





~ 本 地 pear 

SHE 好 [ 
STEP|18 选择 第 3 行 中 的 所 有 单元 格 . 单 击 【 属  。 
性 】 面 板 中 的 【合并 所 选单 元 格 】 按 钮 。 同 时 . 在 


H 站 练习 : 制作 导航 条 版 块 


在 网 站 设计 过 程 中 ， 为 了 吸引 浏览 者 注意 ， 需 要 制作 一 些 
Banner 效果 , 尤其 是 将 Banner 制作 成 具有 Flash 的 动画 效果 。 在 
本 练习 中 ， 将 通过 制作 一 个 导航 条 版 块 网 页 ， 来 详细 介绍 制作 





























练习 要 占 
Flash Banner 效果 的 方法 。 练习 要 点 
要 报时 有 插入 Div 标签 
插入 图 像 
插入 表格 
设置 表格 属性 
二 分 类 关联 CSS 文件 
ep 插入 Flash 动画 
ce je 设置 Flash 动画 属性 
ee 3 3 
a 所 六 
经由 十 字 境 区 要 
人 aaa 和 
pk 3 
十 衬 括 配件 
wr sm ha 
4 





操作 步骤 “》》》 【附加 现 有 的 CSS 文件 】 选 项 。 
STEP|01 设置 网 页 标题 。 新 建 空白 文档 .在 【 代 
码 】 视 图 中 .将 网 页 标题 更 改 为 “蒲公英 十 字 绣 “。 


1 <ldoctype htnl> 
2 <html> 








3 <head> 


4 cneta charsagta' tf en> 
中 te 入 ]/ ttre> 
6 </head> 
a <body> ee 
6 
1 


</html> 





STEP|02 关联 CSS 文件 。 执行 【窗口 】| 【Css 
设计 器 】 命 令 ， 单 击 【 添 加 CSS 源 】 命 令 ， 选择 
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STEP|03 在 弹出 的 【使 用 现 有 的 CSS 文件 ] 对 话 。 STEP|07 制作 Flash 内 容 。 执 行 【 插 入 】IDiv 命 
框 中 ， 单 击 【 浏 览 】 按 钮 。 令 . 在 tile 标签 之 后 插入 一 个 名 为 banner 的 Div 
标签 ， 并 删除 标签 内 容 。 


/URLE): 和 
测 为 : [ok 

ONO 
， 有 条 件 使 用 《可 选 ? 

















CC 副 ][ 了 |] 











STEP|04 然后 ， 在 弹出 的 【选择 样式 表 文 件 】 对 
话 框 中 ,选择 CSS 样式 表 文件 ， 并 单 击 【确定 】 





STEP|08 将 光标 定位 在 该 标签 内 ， 执 行 【插入 】 
HTMLIFlash SWF 命令 ， 在 弹出 的 【选择 SWF】 
对 话 框 中 , 选择 SWF 文件 并 单 击 【 确 定 】 按 钮 。 

















1 人 Ex [7 可 四 
STEP|05 制作 版 头 内 容 . 执行 【插入 】|Div 命令 SQ: ka 人 一 = 
在 弹出 的 【插入 Div】 对 话 框 中 ,设置 标签 名 称 ， = -一 一- 
并 单 击 【确定 】 按 钮 。 








STEP|09 在 弹出 的 【对 象 标签 辅助 功能 属性 】 对 
话 框 中 ， 直 接 单 击 【 确 定 】 按 钮 。 











标题: | Co 
访 同 键 | 。 | Tab 包 来 引 | | 
STEP|06 在 container 标签 中 插入 一 个 名 为 title 


的 Div 标签 ， 输 入 标签 内 容 并 设置 其 链接 属性 。 A 








1 ldoctype htnl> A 
2 <html> 







esheet" type="text/css"> 


STEP|10 然后 . 在 【属性 】 面 板 中 将 Wmode 设 
为 【透明 】， 同 时 在 【代码 】 视 图 中 修改 Flash 
的 大 小 值 。 





> 收藏 本 站 </a> <a href="#"> 设 为 首 风 | 











党 册页 制 作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 注 : 





16 <body> 
SO 











STEPI1 制作 导航 内 容 。 将 光标 定位 在 
<div></div> 标 签 之 间 . 插入 一 个 无 名 Div 标签 . 同 
时 在 【属性 】 面 板 中 将 Class 设置 为 container。 


/omen. adobe.con/inages/shared/download_buttons/get_flash “| 
_player .gif" at- 器 取 Adobe Flash PLayer" 
</div> 
a 
eaeep 


</object> 


ript type=ntext/javascript 


object,registerObject("FLashID'") ; 
c/srrint> 





STEP|12 单 击 【 属 性 】 面 板 中 的 【项 目 列表 】 按 
钮 , 在 标签 内 容 插 入 一 个 项 目 列表 . 同时 将 项 目 列 
表 的 ID 更 改 为 top-nav。 


/div> 












</object> 


37 </object> 


45 <script type="text/javascript"> 





STEP|13 在 项 目 列表 中 输入 列表 内 容 . 
每 个 内 容 设置 链接 属性 。 


并 分 别 为 





<div class="container"> 


<ut d="top-nav"> 


站 首页 </a></11> 
我 们 /a></ U1> 
服务 </a></1i> 
/a></Ui> 
> 再 线 购买 </a></Li> 
"加盟 库 锁 c/a></13> 





















STEPI14 制作 主体 内 容 。 将 光标 定位 在 
<div></div> 标 签 之 间 .插入 一 个 名 为 content 的 Div 
标签 ， 在 标签 中 输入 相关 文本 并 设置 文本 的 字体 
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< 加 
</div> 
<div d="content"><hl> 欢 迎 您 进入 我 们 的 网 站 : </hl> 
F 艺 ， 最 初 是 在 宫廷 中 风行 ， 后 未 
| 家 和 地 区 。 随 着 时 间 的 
推荐 ， 于 a 天 从 是 纺 和， 颜色 还 是 材质 ， 都 别 具 匠 心 。</p 
5s1 <p> 我 们 是 一 家 高 衰 专业 化 的 公司 。 专注 于 十 字 颖 : 域 。 目前 
己 彩 成 强大 开发 设计 能 力 ， 栈 细 化 流程 生产 能 力 ， 寺 业 营 销 管 理 能 妨 和 
财务 管控 能 力 ， 紧 紧 围 绕 核心 形成 强力 的 优势 。</p> 
| <span> 经 执 十 字 线 </span> 


















</div> 








STEP|15 执行 【插入 】| 【表格 】 命 令 .在 弹出 的 
【表格 】 对 话 框 中 ,设置 表格 尺寸 ， 单 击 【 确 定 】 

















STEP|16 选择 第 1 行 
面板 中 将 【宽度 】 设置 为 135. 同时 插入 一 个 图 片 。 


第 1 列 的 单元 格 , 在 【属性 】 

















[mm 贱 四 天 > 
[二 ~ DO 

| #7 | Rw] TD 宕 本 加 口 ee 
一 | 高 的 | ”村 苯 亿 站 























STEP| 人 7 使 用 同样 的 方法 ,设置 第 1 行 其 他 单元 
格 的 宽度 并 为 其 插入 图 片 。 同时. 在 第 1 行 单元 格 











2 
















fn 








"><h2 class="sideheader"> 十 字 乡 分 类 </h2> 


样式 。 


























STEP|20 在 Div 标签 navcontainer 后 面 插入 一 个 
:| ”名 为 pro 的 Div 标签 . 在 其 中 插入 一 个 3 行 3 列 的 
STEP|18 制作 右 侧 版 块 插入 一 个 名 为 side menu 表格， 设置 表格 属性 并 输入 表格 内 容 。 
的 Div 标签 ， 输 入 标题 文本 并 设置 文本 的 字体 Cd 

样式 。 

















=nen align="center" 


="middLen><h2> 十 字 蜂 


本 td height-"3en align-ncenterm> xa hrefcngw 妥 的 旋律 </ay 





"> 针线 </a> </cd 














， ;布料 </aye/rd 
加 [ Side-nenuyych2 caoocnoidoheoderm 十 下 分 类 cj "24"><a href="#" 3 折线 器 </a>e/td ,| 
wav 
1 <script type="text/javascript"> 
swfobject. registerobject("Flash10"); y 
er STEP|21 制作 版 尾 内 容 。 最 后 ， 插 入 一 个 名 为 
</body> 
</htm> 二 


footer 的 Div 标签 ， 并 在 标签 内 输入 版 尾 文本 。 








STEP|19 同时 . 在 其 后 插入 一 个 名 为 navcontainer 
的 Div 标签 , 在 该 标签 内 添加 一 个 项 目 列表 . 输入 
列表 内 容 并 设置 其 链接 属性 。 


">ea href="#" > 鳞 架 <ja></td 
1 > 颖 圈 </a></td: 
"> 水 演 御 </a></t 




















Scopyrient © 1998 2099 9 区 和 怖 
/div> 


[I 新 手 训练 营 


练习 1: 设置 背景 音乐 执行 【插入 】| 【图 像 ] 命令, 插入 一 个 图 片 ， 并 设置 
售 downloads\10\ 新 手 训练 营 \ 背 景 音乐 图 片 大 小 。 最后, 执行 【插入 】|IHTMLI【 插 件 】 命令. 

提示 :本 练习 中 .首先 . 执行 【插入 】| 【表格 】 ”插入 一 个 MP3 音乐 文件 。 同 时 ， 单 击 【 属 性 】 面 板 
命令 , 插入 一 个 2 行 1 列 的 表格 . 并 设置 表格 的 居中 中 的 【人 参数】 按钮 在 弹出 的 对 话 框 中 设置 音乐 元 素 


对 齐 格式 。 然 后 ， 将 光标 定位 在 表格 内 的 第 1 行 中 ， ”的 参数 和 值 。 


























































:网 页 制作 与 网 站 组 建 上 CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 











练习 2: 在 网 页 插入 视频 


六 downloads\10\ 新 手 训练 营 \ 插 入 视频 

提示 : 在 本 练习 中 .首先 执行 【插入 】 

IHTMLIHTML Video 命令 ,在 网 页 中 插入 一 个 视频 元 

素 。 然后, 选择 该 视频 . 在 【属性 】 面 板 中 设置 【 源 】、 

W 和 H 属性 选项 ， 用 来 定义 视频 的 源 文件 地 址 、 高 
度 和 宽度 值 。 
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练习 3: 制作 累进 式 下 载 视频 


全 downloads\10\ 新 手 训练 营 \ 累 进 式 下 载 视频 
提示 : 在 本 练习 中 , 首先 执行 【插入 ]IHTMLIFlash 
Video 命令 ， 在 弹出 的 【插入 FLV】 对 话 框 中 单 击 
【浏览 】 按 钮 。 在 【插入 FLV】 对 话 框 中 . 设置 各 项 
选项 。 
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第 10 章 


设计 多 媒体 网 页 


然后 . 单 击 【确定 】 按钮. 保存 网 页 文档 . 按 F12 
键 预览 视频 效果 。 

















练习 4: 插入 HTML 音频 


全 downloads\10\ 新 手 训练 营 \HTML 音频 

提示 : 在 本 练习 中 ， 首先 执行 【插入 】 
IHTMLIHTML Audio 命令 , 在 网 页 中 插入 一 个 HTML 
音频 对 象 。 然 后 ,选择 该 对 象 ， 在 【属性 】 面 板 中 设 


置 【 源 】 属 性 。 最 后 ,保存 网 页 文档 ， 按 F12 键 预览 
音频 效果 。 
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传统 方式 布局 


在 网 页 设计 过 程 中 ,为 了 将 网 页 元 素 按照 一 定 的 序列 或 位 置 进行 排列 ， 首 先 需要 对 页 面 进行 布局 ， 
而 最 简单 最 传统 的 布局 方式 就 是 使 用 表格 。 表 格 是 由 行 和 列 组 成 的 ,而 每 一 行 或 每 一 列 又 包含 一 个 或 多 
个 单元 格 ， 网 页 元 素 可 以 放置 在 任意 一 个 单元 格 中 。 

本 章 将 详细 介绍 表格 的 创建 和 设置 方法 ， 以 及 使 用 表格 布局 网 页 的 操作 方法 ， 使 读者 在 
Dreamweaver 中 能 够 进行 简单 的 页 面 布 局 。 
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传统 方式 布局 





项 遂 曾 创建 夫 格 





在 Dreamweaver 中 ， 表格 的 主要 功能 是 对 网 
页 元 素 进行 定位 与 排版 。 熟练 地 运用 表格 ., 不 仅 可 
以 任意 定位 网 页 元 素 , 而 且 还 可 以 丰富 网 页 的 页 面 
效果 。 


11.1.1 插入 表格 
Dreamweaver 为 用 户 提供 了 极其 方便 的 插入 
表格 的 方法 。 


首先 ,在 网 页 中 将 光标 定位 在 需要 插入 表格 的 
位 置 。 然 后 , 执行 【插入 】〗| 【表格 】 命 令 . 或 者 
在 【插入 】 面 板 中 的 HTML 选项 卡 中 , 单 击 Table 
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然后 ,在 弹出 的 Table 对 话 框 中 , 设置 相应 的 
参数 , 单 击 【 确 定 】 按 钮 ， 即 可 在 网 页 中 插入 一 个 
表格 。 











Table 





表格 大 小 





行 数 : 3 到 :3 
表格 宽度 : |200 | | 像素 YY 
边框 粮 幼 : 1 你 未 

单元 格 边 下 

单元 格 间距 图 









































Table 对 话 框 中 . 





主要 包括 下 列表 格 中 的 一 些 









指定 表格 行 的 数目 
指定 表格 列 的 数目 
以 像素 或 百分比 为 单位 指定 表格 
的 宽度 
以 像素 为 单位 指定 表格 边框 的 宽度 
指定 单元 格 边框 与 单元 格 内 容 之 
间 的 像素 值 
指定 相 邻 单元 格 之 间 的 像素 值 
对 表格 不 启用 行 或 列 标题 

将 表格 的 第 一 列 作为 标题 列 ， 以 便 
为 表格 中 的 每 一 行 输入 一 个 标题 
将 表格 的 第 一 行 作为 标题 行 ， 以 便 
为 表格 中 的 每 一 列 输入 一 个 标题 
在 表格 中 输入 列 标题 和 行 标题 
提供 一 个 显示 在 表格 外 的 表格 标题 
用 于 输入 表格 的 说 明 
























当 表格 宽度 的 单位 为 百分比 时 , 表格 宽度 会 
随 着 浏览 器 窗口 的 改变 而 变化 。 当 表格 宽度 


的 单位 设置 为 像素 时 ， 表 格 宽度 是 固定 的 ， 
不 会 随 着 浏览 器 窗口 的 改变 而 变化 。 





11.1.2 ”创建 对 套 表格 


吝 套 表格 是 在 另 一 个 表格 单元 格 中 插入 的 表 
格 ， 其 设置 属性 的 方法 与 任何 其 他 表格 相同 。 

首先 , 在 网 页 中 插入 一 个 表格 . 并 将 光标 置 于 
表格 中 任意 一 个 单元 格 内 。 然 后 . 在 【插入 】 面 板 
中 的 HIML 选项 卡 中 . 单 击 Table 按钮 。 

























































































网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 
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在 弹出 的 Table 对 话 框 中 ， 设 置 相应 的 参数 ， 





单 击 【 确 定 】 按钮 , 即 可 在 原 表格 中 插入 一 个 表格 。 
此 时 ， 所 插入 的 表格 ,相对 于 原先 表格 称 为 谋 套 
表格 。 












































11.1.3 ”添加 表格 内 容 


表格 内 容 的 添加 方法 与 普通 输入 文本 和 插入 
图 像 的 方法 大 体 一 致 。 
1. 输入 文本 

首先 ,将 光标 定位 在 表格 中 的 任意 一 个 单元 格 








当 表 格 的 单位 为 像素 时 , 其 单元 格 的 宽度 不 会 
随 着 内 容 增多 而 发 生变 化 ; 而 单元 格 的 高 度 则 会 随 
着 内 容 的 增多 而 发 生变 化 。 
2. 插入 图 像 

首先 ,将 光标 定位 在 表格 中 的 任意 一 
中 , 并 在 【插入 】 面 板 中 的 HIML 选项 卡 中 . 单 
击 Image 按钮 。 





个 单元 格 





























然后 , 在 弹出 的 【选择 图 像 源 文件 】 对 话 框 中 ， 
选择 图 片 文件 ， 单 击 【 确 定 】 按 钮 即 可 。 
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中 。 然 后 ， 在 单元 格 中 直接 输入 文本 即 可 。 
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此 时 .在 选中 的 单元 格 中 .将 显示 插入 的 图 像 。 
用 户 可 以 使 用 调整 图 像 的 操作 方法 . 来 调整 单元 格 
中 的 图 像 大 小 。 
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在 表格 中 输入 文本 时 . 当 表 格 的 单位 为 百分比 
(%) 时 . 其 单元 格 的 宽度 将 随 着 内 容 的 不 断 增多 . 
而 向 右 延 伸 。 
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创建 表格 之 后 .为 使 表格 符合 网 页 的 整体 设计 
要 求 . 还 需要 对 表格 进行 选择 、 添 加 行 或 列 、 调 整 
大 小 等 一 系列 的 编辑 操作 。 


11.2.1 选择 表格 


编辑 表格 的 首要 工作 是 选择 表格 .用户 不 仅 可 
以 选择 整个 表格 ， 而且 还 可 以 选择 表格 中 的 一 行 、 
一 列 . 一 个 单元 格 . 多 个 连续 的 或 不 连续 的 单元 格 。 
1. 选择 整个 表格 

将 鼠标 移 至 表格 的 左上 角 、 上 边框 或 下 边框 的 
任意 位 置 . 当 光 标 箭头 后 面 尾随 表格 图 标 洱 时, 单 
击 即 可 选择 整个 表格 。 
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用 户 也 可 以 通过 单 击 表格 行 或 列 边框 的 方 


法 , 或 者 右 击 表格 执行 【表格 〗|【 选 择 表 格 】 
命令 ， 来 选择 整个 表格 。 





另外 , 将 光标 放置 于 任意 一 个 单元 格 中 . 单 击 
状态 栏 中 的 【标签 选择 器 】 上 的 <table> 标 签 . 也 可 
选择 整个 表格 。 
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编辑 表格 


2. 选择 单元 格 

将 光标 放置 于 表格 中 的 某 个 单元 格 中 , 即 可 选 
择 该 单元 格 。 当 用 户 想 选择 多 个 连续 的 单元 格 时 ， 
只 需 沿 任意 方向 拖 动 鼠标 即 可 。 
| 








LN 








BE ,Be,, 
tt 
BB 


而 当 用 户 想 选择 多 个 不 连续 的 单元 格 时 , 只 需 
在 按 住 Ctrl 键 的 同时 单 击 其 他 单元 格 , 即 可 同时 选 
择 多 个 不 连续 的 单元 格 。 
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- 选择 行 或 列 

选择 行 或 列 即 选择 表格 中 一 行 或 一 列 中 所 有 
的 连续 单元 格 。 

将 鼠标 移 至 表格 中 行 的 最 左 端 或 列 的 最 上 端 ， 
当 光 标 变 成 “向 右 ” 或 “向 下 ”箭头 时 , 单 击 即 可 
选择 整 行 或 整 列 。 


11.2.2 ”调整 表格 


调整 表格 包括 调整 表格 的 大 小 . 以 及 添加 或 删 
除 表格 行 或 列 等 操作 . 即 确保 了 整个 网 页 的 布局 符 
合 设计 要 求 ， 又 准确 地 定位 网 页 中 的 各 个 元 素 。 











页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 
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1. 调整 表格 大 小 

选择 整个 表格 之 后 . 用户 会 发 现在 表格 的 右边 
框 、 下 边框 和 右 下 角 会 出 现 三 个 控制 点 。 此 时 . 将 
光标 移 至 控制 点 上 ， 当 光标 变 成 “双向 箭头 ”时 
拖 动 鼠标 即 可 调整 表格 的 大 小 。 
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;网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 


2. 添加 表格 行 与 列 

选择 任意 一 个 单元 格 . 执行 【修改 】| 【表格 】 
1【[ 插 入行 】 命 令 . 或 者 右 击 表格 执行 【表格 】|【 插 
入 行 】 命 令 ， 即 可 在 所 选单 元 格 的 上 方 插入 一 个 








EE 
合并 单元 (MM) 


Cal+AR+M 
白 全 单元 枉 p) 。 Chri+Alt+Shift+T 














另外 ， 用户 也 可 以 右 击 执行 【表格 】|【 插 入 
列 】 命 令 , 在 所 选单 元 格 的 左 侧 插入 一 个 新 列 。 或 
者 单 击 表格 列 标题 , 在 展开 的 菜单 中 选择 【 左 侧 插 
入 列 】 或 【 右 侧 插入 列 】 命 令 . 选择 性 地 插入 新 列 。 
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另外 , 将 光标 移动 到 单元 格 的 边框 上 . 当 光 标 
变 成 “左右 双向 箭头 ”中 或 者 “上 下 双向 箭头 ” 却 
时 ， 拖 动 鼠 标 即 可 调整 单元 格 的 行 高 或 列 宽 。 
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在 调整 表格 的 列 帘 时 ， 可 通过 按 住 Shift 键 


拖 动 边框 的 方法 ， 在 保留 其 他 单元 格 列 宽 的 
情况 下 ， 调 整 该 单元 格 的 列 宽 。 



























除 此 之 外 . 用 户 还 可 以 右 击 表格 , 执行 【表格 】 
|【 插 入 行 或 列 】 命 令 ， 在 弹出 的 【插入 行 或 列 】 
对 话 框 中 ,设置 所 添加 行 或 列 的 数目 和 位 置 。 











行 数 (0): [1 图 
位 置 : 〇 所 选 之 上 多) 
@ 所 选 之 下 (B) 





一 一 


3. 删除 表格 行 与 列 

选择 所 需 删 除 行 中 的 任意 一 个 单元 格 ， 执 行 
【修改 】| 【表格 】|【 考 除 行 】 或 【删除 列 】 命 令 . 
或 者 右 击 表 格 执 行 【 表 格 】| 【删除 行 】 或 【删除 





























0 可 删除 该 行 或 该 列 。 
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选择 所 需 拆 分 的 单元 格 . 执行 【修改 】|【 表 
格 】|【 拆 分 单元 格 】 命 令 ， 或 者 单 击 【属性 】 面 
板 中 的 【 拆 分 单元 格 为 行 或 列 】 按 钮 3 














11.2.3 ”操作 单元 格 

在 网 页 设计 过 程 中 .经 常会 遇 到 一 些 不 规则 的 
数据 排列 。 此 时 .可 通过 合并 或 拆 分 单元 格 的 方法 ， 
使 网 页 的 排版 样式 符合 网 页 的 设计 要 求 。 
1. 合并 单元 格 

合并 单元 格 可 以 将 同行 或 同 列 中 的 多 个 连续 
单元 格 合并 为 一 个 单元 格 , 但 所 选 连续 的 单元 格 必 
须 可 以 组 成 一 个 矩形 形状 ， 否则 将 无 法 合并 单 
元 格 。 

选择 两 个 或 两 个 以 上 连续 的 单元 格 , 执行 【 修 
改 】| 【表格 】|【 合 并 单元 格 】 命 令 . 或 在 【属性 】 
面板 中 单 击 【合并 所 选单 元 格 】 按 钮 到 ， 即 可 将 
所 选 的 多 个 单元 格 合并 为 一 个 单元 格 。 
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然后 , 在 弹出 的 【 拆 分 单元 格 】 对 话 框 中 , 选 
中 【 行 】 或 【 列 】 选 项 ,并 设置 所 需 拆 分 的 行 或 列 
数 . 单 击 【确定 】 按 钮 即 可 。 
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3. 复制 和 粘贴 单元 格 























| 用 户 不 仅 可 以 在 保留 单元 格 设置 的 情况 下 , 复 
| 制 和 粘贴 单个 单元 格 , 而 且 还 可 以 同时 复制 和 粘贴 
1 多 个 单元 格 。 

es 选择 所 需 复制 的 单个 或 多 个 单元 格 , 执行 【 纺 
i 入 各 | 一生 辑 】| 【拷贝 】 命 令 ， 即 可 复制 所 选单 元 格 及 内 容 。 
: 回扣 (Oe TT 


选择 连续 的 多 个 单元 格 ， 右 击 表格 执行 【 表 


格 】|【 合 并 单元 格 】 命 令 ， 也 可 合并 所 选单 
元 格 。 





2. 拆 分 单元 格 
拆 分 单元 格 可 以 将 一 个 单元 格 以 行 或 列 的 形 
式 拆 分 成 多 个 单元 格 。 












































然后 . 选择 所 需 粘贴 单元 格 的 位 置 , 执行 【 编 
辑 】|【 粘 贴 】 命 令 ， 即 可 将 源 单元 格 及 内 容 粘贴 
到 所 选 位 置 。 








: 网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 } 从 新 手 到 高 手 :::: 


{CC 2015 中 文 版 ) 从 新 手 到 高 














技巧 
用 户 也 可 以 使 用 快捷 键 CtrlHC 和 CtlrtV， 

















来 复制 与 粘贴 单元 格 及 内 容 。 






























































TE 


对 于 文档 中 已 创建 的 表格 ， 可 以 通过 【属性 】 续 表 
面板 来 设置 表格 的 结构 、 大小、 显示 样式 效果 等 表 
用 于 设置 单元 格 之 间 的 距 


和 离 ， 单 位 为 像素 
i | 用 于 设置 表格 中 单元 格 内 容 

11.3.1 设置 表格 属性 阿 人 

cg 【 左 对 齐 】、【 居 中 对 齐 】 和 
选择 表格 , 在 【属性 】 面 板 中 将 显示 该 表格 的 【证 对 齐 】4 种 方式 
基本 属性 ， 包 括 表格 的 ID 名 称 、 列 数 、 行 数 、 对 月 于 说 是 表格 边 术 的 格 区 
齐 方式 等 属性 。 单位 为 像素 
用 于 设置 表格 的 类 CSS 样式 
将 已 定义 宽度 的 表格 宽度 清 
除 ， 转 换 为 无 宽度 定义 的 表 
格 ， 使 表格 随 内 容 增加 而 自 
动 扩展 宽度 
将 已 定义 行 高 的 表格 行 高 清 

















CellSpace 












Pw | mes sx v Ca | lig lw ve ~ 





| | 
导 各 针 因 i EE 清除 列 宽 
和 一 





【属性 】 面 板 中 各 选项 的 具体 含义 . 如 下 表 

































所 述 。 清 除 ， 转 换 为 无 行 高 定义 的 表 
表格 用 于 定义 表格 在 网 页 文档 中 将 表格 宽 | 将 以 百分比 为 单位 的 表格 宽 
唯一 的 编号 标识 度 转换 成 | 度 转换 为 具体 的 以 像素 为 单 
行 用 于 定义 表格 中 包含 的 行 的 数量 像素 E 国 | 位 的 表格 宽度 
用 于 设置 表格 的 宽度 ， 可 直 将 表格 宽 | 将 以 像素 为 单位 的 表格 宽度 
宽 接 输入 数值 ， 单 位 为 像素 或 度 转换 成 | 转换 为 具体 的 以 百分比 为 单 
百分比 百分比 5 到 | 位 的 表格 宽度 
本 如 在 设计 表格 时 使 用 了 
a 和 7 包含 的 列 的 人 
一 一 = Fireworks 源 文件 | 样式 设置 ， 则 可 通过 次 项 目 
Cellpad ee 管理 Fireworks 的 表格 设置 ， 
之 间 的 距离 ， 单 位 为 像素 并 将 其 应 用 到 表格 中 
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11.3.2 ”设置 单元 格 属性 

选择 表格 中 的 任意 一 个 单元 格 . 在 【属性 】 面 
板 中 将 显示 该 单元 格 的 基本 属性 . 包括 合并 所 选单 
元 格 、 背 景 颜色 、 标 题 等 属性 。 





























《mL] | 将 式 吧 ) [无 v 大 无 EE = 标量 
地 css ww 元。 v 上 和 加 | “0 BHC 
国 | 音 元 档 。 水 平 (2) 3 | | | 
一 口交 帮 罗 中 “| 高 6 村 是 史 口 








【属性 】 面 板 中 有 关 单 元 格 属性 的 各 选项 的 具 
体 含义 ,如 下 表 所 述 。 


11.4 














::;;; 第 11 章 传统 方式 布局 
选 项 作用 
会 并 所 选单 | 将 所 选 的 多 个 同行 或 同 列 单元 格 
Sd 交 沁 
跨度 加 | 
打分 单元 格 | 将 已 过 夭 的 位 于 多 行 或 多 列 中 的 
为 行 或 列 BE | 独立 单元 格 拆 分 为 多 个 单元 格 
水 于 定义 单元 格 中 内 容 的 水 平 对 齐 方式 
至 直 定义 昔 元 格 让 内 容 的 各 站 对 齐 方式 
加 定义 单元 格 的 宽度 
高 定义 单元 格 的 高 度 
迹 中 该 项 目 则 单元 格 中 的 内 容 将 
不 换行 。 | 不 自动 欣 行 ， 音 元 格 的 宽度 也 将 随 
内 容 的 增加 而 扩展 
二 中 该 项 目 ， 则 将 普通 的 单元 格 村 
标 是 换 为 标题 单元 格 ， 单 元 格 内 的 文本 
加 得 并 水 平 居中 显示 
译 训 肌 @ | 节 击 该 硕 目的 颜色 失 取 各 ,可 过 机 





色 并 将 颜色 应 用 到 单元 格 背景 中 





Dreamweaver 除了 为 用 户 提供 插入 表格 . 编辑 
和 设置 表格 属性 等 基础 表格 功能 之 外 , 还 为 用 户 提 
供 了 排序 表格 数据 和 导入 /导出 表格 数据 等 数据 处 
理 功 能 ， 以 方便 用 户 使 用 外 部 数据 来 设计 网 页 。 


11.4.1 排序 数据 


排序 数据 是 指 按照 一 定 的 规律 对 表格 内 的 单 
列 数据 进行 升序 或 降序 排列 。 

选择 表格 ,执行 【命令 】|【 排 序 表格 】 命 令 。 
在 弹出 的 【排序 表格 】 对 话 框 中 . 设置 相应 选项 . 
单 击 【确定 】 按 钮 即 可 。 














排序 表格 | >x | 
排序 控 [ 列 1 v| 证 
民有 ov 庙 用 
取消 
再 按 : Y 帮助 
顺序 :| 按 字 名师 序 v | 天 序 > 
选项 口 排 序 包含 第 一 行 
口 排序 标题 行 
口 排序 著 注 行 


口 完成 排序 后 所 有 行 颜色 保持 不 变 











处 理 表格 数据 


【排序 表格 】 对 话 框 中 ,各 选项 的 具体 含义 ， 


如 下 所 述 。 


口 排序 按 用 于 设置 进行 排序 所 依据 的 列 。 

口 顺序 用 于 设置 排序 的 顺序 和 方向 ， 选 择 
【 按 字母 顺序 】 选 项 将 按照 字母 的 排列 进 
行 排序 ， 而 选择 【 按 数 字 顺 序 】 选 项 则 按 
照 数 字 的 排列 进行 排序 。 当 选择 【升序 】 
方向 时 ， 则 表示 排序 按照 数字 从 小 到 大 、 
字母 从 A 到 乙 的 方向 进行 排列 ; 当选 择 [ 降 
序 】〗】 方 向 时 ， 则 表示 排序 按照 数字 从 大 到 
小 、 字 母 从 乙 到 人 的 方向 进行 排列 。 

口 再 按 用 于 设置 进行 排序 所 依据 的 第 二 
依据 的 列 。 

口 顺序 用 于 设置 第 二 依据 的 排序 顺序 和 
方向 。 

口 排序 包含 第 一 行 ”启用 该 复 选 框 ， 可 以 将 
表格 第 一 行 包 含 在 排序 中 。 

口 排序 标题 行 ”启用 该 复 选 框 ， 可 以 指定 使 
用 与 主体 行 相同 的 条 件 对 表格 的 标题 部 
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分 中 的 所 有 行进 行 排序 。 

口 排序 脚注 行 ”启用 该 复 选 框 ， 可 以 指定 按 
照 与 主体 行 相同 的 条 件 对 表格 的 脚注 部 
分 中 所 有 的 行进 行 排序 。 

口 完成 排序 后 所 有 行 颜色 保持 不 变 启用 
该 复 选 框 ,可 以 指定 排序 之 后 表格 行 属性 
应 该 与 同一 内 容 保持 关联 。 


11.4.2 导入 /导出 表格 数据 


Dreamweaver 为 用 户 提 供 了 导入 /导出 表格 数 
据 功 能 ， 通 过 该 功能 不 仅 可 以 将 分 隔 文本 格式 、 
Excel 和 Word 等 格式 的 数据 导入 到 Dreamweaver 
中 .而 且 还 可 以 将 Dreamweaver 中 的 数据 导出 为 普 
通 的 表格 式 数 据 。 
1. 导入 表格 式 数据 

在 Dreamweaver 文档 中 ,执行 【文件 】 |【 导 
入 】|【 表 格式 数据 】 命 令 ， 在 弹出 的 【导入 表格 
式 数 据 】 对 话 框 中 ， 设 置 相应 选项 ， 单 击 【 确 定 】 
按钮 即 可 。 











数据 文件 : file: ///C|/Users/rhy/Desktop| | 
定 界 符 : 到 点 > 
表格 宽度 : @ 匹配 内 容 
〇 设置 为 百分比 

















【导入 表格 式 数据 】 对 话 框 中 ， 主 要 包括 下 列 
7 个 选项 。 

口 数据 文件 用 于 设置 所 需 导 入 的 文件 路 
径 ， 可 通过 单 击 【浏览 〗 按 钮 ， 在 弹出 的 
对 话 框 中 选择 导入 文件 。 

口 定 界 符 ”用 于 设置 导入 文件 中 所 使 用 的 
分 隔 符 ， 包 括 【 过 点】、【 引 号 】、【 分 号 】、 
【Tab】〗 和 【其 他 】〗5 种 分 隔 符 ; 当 用 户 选 
择 【 其 他 】〗 分 隔 符 时 ， 则 需要 在 右 侧 的 文 
本 框 中 输入 新 的 分 隔 符 。 

口 表格 宽度 ”用 于 设置 表格 的 宽度 ， 选 中 
【匹配 内 容 〗 选 项 可 以 使 每 个 列 足 够 宽 以 











适应 该 列 中 最 长 的 文本 字符 串 ; 选中 【〖 设 
置 为 〗】 选 项 既 可 以 以 像素 为 单位 指定 表格 
的 国定 列 宽 ， 又 可 以 按照 浏览 器 窗口 宽度 
的 百分比 来 指定 表格 的 列 宽 。 
口 单元 格 边 距 用 于 指定 单元 格 内 容 与 单 
元 格 边框 之 间 的 距离 ， 以 像素 为 单位 。 
口 单元 格 间距 ”用 于 指定 相 邻 单元 格 之 间 
的 距离 ， 以 像素 为 单位 。 
口 格式 化 首 行 ”用 于 设置 表格 首 行 的 格式 ， 
包括 【无 格式 】【 粗 体 ] 【斜体 】 和 【加 
粗 儿 体 】4 种 格式 。 
口 边框 ”用 于 指定 表格 边框 的 宽度 ， 以 像素 
为 单位 。 
2. 导入 Excel 数据 
在 Dreamweaver 文档 中 ,选择 导入 位 置 ， 执 
行 【文件 】|【 导 入 】〗| 【Excel 文档 】 命 令 ， 在 弹出 
的 【导入 Excel 文档 】 对 话 框 中 选择 Excel 文件 ， 
单 击 【 打 开 】 按 钮 。 


“| @ 血 己 国 - 





EECT ET 
朝 理 Yord 艇 甘 间 新 (C》 
此 时 ， 用 户 可 以 在 Dreamweaver 文档 中 ， 查 
看 导入 的 Excel 文档 中 的 数据 。 对 于 导入 的 Excel 
数据 表 , 用 户 也 可 以 选择 访 表 ,在 【属性 】 面 板 中 
设置 表格 的 基本 属性 。 
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3. 导入 Word 数据 

在 Dreamweaver 文档 中 ， 选择 导入 位 置 . 执 
行 【文件 】|【 导 入 】|【Word 文档 】 命 令 ， 在 弹出 
的 【导入 Word 文档 】 对 话 框 中 , 选择 Word 文件 . 
单 击 【 打 开 】 按 钮 。 


查找 范围 (I) 








文件 类 型 人) 下 取消 


机 化 EECT ET 和 下 
回 清 旦 Word 咎 英 间 号 (c) 











嘱 


此 时 ,用户 可 以 在 Dreamweaver 文档 中 ， 查 
看 导入 的 Word 文档 中 的 数据 。 





































导入 Word 文档 时 ， 其 Word 文档 中 的 内 容 
必须 以 表格 的 形式 显示 ， 和 否则 所 导入 的 
Word 文档 内 容 将 会 以 普通 文本 的 格式 进行 
显示 。 
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4. 导出 数据 

在 Dreamweaver 文档 中 ,除了 可 以 导入 外 部 
数据 之 外 .还 可 以 将 Dreamweaver 文档 中 的 表格 导 
出 为 普通 的 表格 式 数 据 。 

首先 . 选择 表格 或 任意 一 个 单元 格 , 执行 【 文 
件 】|【 导 出 】|【 表 格 】 命 令 。 然 后 ,在 弹出 的 【 导 
出 表格 】 对 话 框 中 ,设置 【 定 界 符 】 选 项 ,用 于 指 
定 分 隔 符 样式 : 同时 设置 【换行 符 】 选 项 ， 用 于 指 
定 打 开 文 件 所 使 用 的 操作 系统 版 本 .并 单 击 【 导 出 】 




















最 后 . 在 弹出 的 【表格 导出 为 】 对 话 框 中 , 设 
置 保存 位 置 和 名 称 ， 单 击 【保存 】 按 钮 即 可 。 


~N 
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1 有恒 应 用 IFrame 框架 


IFrame 框架 (浮动 框架 ) 又 被 称 作 嵌 入 帧 . 
是 一 种 特殊 的 框架 结构 , 它 可 以 像 层 一 样 插入 到 普 
通 的 HIML 网 页 中 。 但 由 于 Dreamweaver 中 没有 
提供 该 框架 的 可 视 化 操作 . 因此 在 应 用 该 框架 时 还 
需要 编写 一 些 网 页 源 代 码 。 





11.5.1 IFrame 框架 概述 


IFrame 框架 是 一 种 灵活 的 框架 .是 一 种 
块 状 对 象 ， 其 与 层 (div) 的 属性 非常 类 似 . 
所 有 普通 块 状 对 象 的 属性 都 可 以 应 用 在 浮动 
框架 中 。 当 然 . 浮动 框架 的 标签 也 必须 遵循 








网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 





HTML 的 规则 .例如 必须 闭合 等 。 在 网 页 中 
使 用 IFrame 框架 . 其 代码 如 下 所 示 。 


签 中 输入 源 代码 ， 即 用 于 规范 框架 大 小 的 源 代码 。 


<iframe width="700" name="bow" 
<iframe src="index.html" id= height="600" scrolling="auto" 
frameborder="1" src="Untitled- 


4.html"></iframe> 


"newframe"></iframe> 


IFrame 框架 可 以 使 用 所 有 块 状 对 象 可 以 


使 用 的 CSS 属性 以 及 HTML 属性 .IE 5.5 以 此 时 ,页 面 中 插入 的 IFrame 框架 的 位 置 会 变 


:网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 
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上 版 本 的 浏览 器 已 开始 支持 透明 的 IFrame 
框架 。 只 需 将 框架 的 


IFrame 

















allowTransparency 属性 设置 为 tre. 并 将 赃 © ee fe i es 
入 的 文 档 背 景 颜 色 设 置 为 和 5- 国 关 人 从 器 # 轨 - 国 限 ”网 本 果 - 办 六 ”月 可 a 家 
allowTransparency. 即 可 将 框架 设置 为 透明 。 Db ©| 3 zaxs Cm) 
在 使 用 下 rame 框架 时 需要 了 解 和 注意 ， 该 标 
签 仅 在 微软 的 正 4.0 以 上 版 本 的 浏览 器 中 被 支持 。 
并 且 该 标签 仅仅 是 一 个 HTML 标签 。 因 此 在 使 用 
IFrame 框架 时 ,网 页 文档 的 DTD 类 型 不 能 是 Strict 
(严格 型 ) 。 
章鱼 你 产 允 所 双 轩 策 炎 T 下 载 严 了 后 口 0 Q100” 1 


11.5.2 ”插入 IFrame 框架 


插入 IFrame 框架 的 方法 非常 简单 ， 用 户 只 需 
在 页 面 中 选择 插入 位 置 , 然后 在 【插入 】 面 板 中 的 
HTML 选项 卡 中 ， 单 击 下 RAME 按钮 即 可 。 


CR 
































此 时 . 在 【代码 】 视 图 中 .将 生成 IFrame 框 
架 的 代码 ， 即 <iframe></iframe> 标 签 。 


[<ldoctype htnly> | 
<html> 





3 <head> 

4 <meta charset="utf-a"> 

5 <titLle> 无 标题 文档 </title> 
</head> 


</body> 


| ceraeschrras 
9 </htnl> 





为 了 完善 框架 . 还 需要 在 <iframe></iframe> 标 





成 灰色 


区 域 , 而 Untitled-4 页 面 则 会 出 现在 IFrame 





框架 中 ， 用 户 可 在 浏览 器 中 查看 最 终 效 果 。 














IFrame 框架 除了 可 以 使 用 普通 块 状 对 象 的 属 
性 , 也 可 以 使 用 一 些 专 有 的 属性 , 其 各 种 属性 的 具 
体 含义 ， 如 下 所 述 。 

口 width 定义 frame 框架 的 宽度 ， 其 属性 

值 为 由 整数 + 单位 或 百分比 组 成 的 长 度 值 。 
口 height 定义 浮动 框架 的 高 度 ， 其 属性 值 
为 由 整数 + 单位 或 百分比 组 成 的 长 度 值 。 

口 name 用 于 设置 浮动 框架 的 唯一 名 称 。 

口 scrolling 用 于 设置 浮动 框架 的 滚动 条 显 
示 方 式 。 

口 franeborder 用 于 控制 框架 的 边框 , 定义 
其 在 网 页 中 是 否 显示 。 其 属性 值 为 0 或 者 
1, 0 代表 不 显示 ， 而 1 代表 显示 。 

口 align 用 于 设置 浮动 框架 在 其 父 对 象 中 
的 对 齐 方式 ，top 属性 值 表 示 对 齐 在 其 父 
对 象 的 顶端 ，middle 属性 值 表示 对 齐 在 其 
父 对 象 的 中 间 ，left 属性 值 表 示 对 齐 在 其 
父 对 象 的 左 侧 , right 属性 值 表 示 对 齐 在 其 
父 对 象 的 右 侧 , bottom 属性 值 表示 对 齐 在 
其 父 对 象 的 底 端 。 

口 longdesc 定义 获取 描述 浮动 框架 的 网 页 
的 URL。 通过 该 属性 ， 可 以 用 网 页 作为 浮 
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让 Te 

口 marginheight 用 于 设置 浮动 框架 与 父 对 
象 顶 部 和 底部 的 边 距 ， 其 值 为 整数 与 像素 
组 成 的 长 度 值 。 

口 marginwidth 用 于 设置 浮动 框架 与 父 对 
象 左 侧 和 右 侧 的 边 距 ， 其 值 为 整数 与 像素 

























组 成 的 长 度 值 。 
口 sre 用 于 显示 浮动 框架 中 网 页 的 地 址 ,其 Fo HO A RD 

可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 ER 站 
11.5.3 ”链接 IFrame 框架 页 面 保持 当前 页 面 ， 在 浏览 器 中 可 以 预览 IFrame 


框架 页 面 的 最 终 效果 。 当 用 户 单 击 浏览 器 右 侧 的 图 
片 时 ， 在 IFrame 框架 中 将 会 显示 所 链接 的 页 面 。 


性 用 看 8 十 I 贞 吉 寺 |[ 首 一 | 口 X 


Y 图 - Q 








链接 IFrame 框架 页 面 的 方法 与 创建 普通 链接 
的 方法 基本 相同 ,其 不 同 在 于 所 设置 的 “目标 ” 属 
性 必须 与 IFrame 框架 名 称 保持 一 致 。 

首先 , 在 页 面 中 选择 左 侧 的 图 像 . 并 在 【属性 】 
面板 中 将 【链接 】 属 性 设置 为 Untitled-4.html， 将 
【目标 】 属 性 设置 为 bow。 































地 图 0 











[CEL 








然后 , 在 页 面 中 选择 右 侧 的 图 像 . 并 在 【属性 】 
面板 中 将 【链接 】 属 性 设置 为 Untitled-5.html， 将 
【目标 】 属 性 设置 为 bow。 





当 用 户 单 击 右 侧 图 像 时 ， 在 IFrame 框架 中 
出 现 了 滚动 条 ， 这 是 因为 IFrame 框架 的 大 
小 是 固定 的 ,而 右 侧 图 像 所 链接 的 页 面 高 度 
超过 了 框架 高 度 ， 因 此 会 出 现 滚动 条 。 


其 【目标 属性 所 设置 的 bow 必须 与 <iframe> 
标签 中 的 name="bow" 的 定义 保持 一 致 ， 否 


则 将 无 法 正常 打开 IFrame 框架 中 所 链接 的 
页 面 。 
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表格 在 网 页 中 是 用 来 定位 和 排版 的 ， 有 时 一 个 表格 无 法 满足 





网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 








所 有 的 需要 ， 这 时 就 需要 运用 到 族 套 表格 。 在 本 练习 中 ， 将 通过 


制作 一 份 个 人 简历 ,来 详细 介绍 谋 套 表格 的 使 用 方法 和 操作 技巧 。 








@ 插入 表格 
@ 设置 表格 属性 
@ 庶 套 表格 

















非 三 


@ 插入 图 像 








@ 创建 CSS 样式 









民 族 以 学 历 | 委 科 
专业 医药 季 强直 学 核 ”| 医 笠 大 邱 
1954617 政治 面 多 。 | 党 吏 



























































到 时 间 | 辣 
下 各 评价 
操作 步骤 “》》》 





STEP|01 设置 页 面 属性 。 新 建 空白 文档 .在 【 属 
性 】 面 板 中 单 击 【 页 面 设置 】 按 钮 ， 在 弹出 的 【页 
面 设置 】 对 话 框 中 ， 将 【大 小 】 设 置 为 14。 





hn (css) 
页 面 字体 (8) ;上 默认 字 体 
A ei 


文本 而 色 0; 同 
展 曙 而 色 加: 国 | 六 
背 果 区 像 (0 [ 


重 政 人 : [ 可 


左边 中 0): |B。 
Hiwatt): LB 


右边 距 四 ) x 
下 过 到 on) Ee 


ET 训 ][ 取 沿 | [应 ] 








STEP|02 打开 【外 观 (HTML)]】 选 项 卡 ,将 【 背 
景 】 设 置 为 手 FFFFF， 并 设置 各 边 距 值 。 


外 砚 _(HmEL) 
人 果 图 你 (): [一 





已 访问 机 生 (0): 国 | 
| 








边 距 高 误 (9) 
边 距 高 衰 ( 坟 




















STEP|03 打开 【标题 编码】 选项 卡 ， 将 【标题 】 
设置 为 “个 人 简历 ”， 并 单 击 【确定 】 按 钮 。 














FJ] 
“区 ER ma ， ，v] 町 新 眶 GO 


ee ti 
口 筷 括 Uni codr 签名 (BoM) (5) 


文件 文件 夹 


让 点 文件 赤 211s| 


CR wm | CRW | 


STEP|04 创建 CSS 样式 。 执 行 【 窗 口 】| 【CSS 
设计 器 】 命 令 . 在 【CSS 设计 器 】 面 板 中 . 单 击 【 添 
加 CSS 源 】 按 钮 ， 选择 【创建 新 的 CSS 文件 】 


ET 











STEP105 在 弹出 的 【创建 新 的 CSS 文件 】 


对 话 框 


中 . 单 击 【 浏 览 】 按 钮 。 




















STEPI06 然后 . 在 弹出 的 【将 样式 表 文 件 另存 为 】 
对 话 框 中 . 设置 样式 表 文 件 名 称 和 保存 位 置 . 单 击 
【保存 】 按 钮 即 可 。 
四 
选择 文件 名 自 : 图 文 件 系统 








站 点 根 目录 | 
站 点 和 服务 器 
“| @ 庄 己 国 - 





RFE): | 且 个 人 阅历 


[论语 


修改 E 期 
2015/5/11 19:34 








STEP|07 在 【Css 设计 器 】 面 板 中 ， 单 击 【 添 加 
选择 器 】 按 钮 ， 添 加 一 个 名 为 .tbg 的 选择 器 .并 在 
【属性 】 面板 中 将 background-color 设置 为 #4bacc6。 











background-image 


ur 输入 文件 路 径 
gradient [7] rone 





四 设置 











background- 
position 





所 有 模式 : 列 出 整个 文档 的 规则 








STEP|08 继续 单 击 【添加 选择 器 】 按 钮 ， 添 加 一 
个 名 为 .tdcolor 的 选择 器 ， 并 在 【属性 】 面 板 中 将 
background-color 设置 为 镍 FF。 
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STEP|09 继续 单 击 【添加 选择 器 】 按 钮 ， 添 加 一 
个 名 为 .tdfonts 的 选择 器 ， 并 在 【属性 】 面 板 中 自 
定义 字体 样式 和 大 小 。 

















STEP|10 制作 基础 表格 。 执 行 【插入 】| 【表格 】 
命令 ,设置 表格 大 小 ， 并 单 击 【 确 定 】 按 钮 。 
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STEP|11 选择 第 1 行 中 的 所 有 单元 格 . 单 击 
性 ] 面 板 中 的 【合并 所 选单 元 格 ] 按钮 . 同时 将 
设置 为 103。 

















Tm A 
a 














STEP|12 同时 . 执行 【插入 】| 【图像 】 命 令 . 在 
弹出 的 对 话 框 中 选择 图 像 文 件 . 单 击 【 确 定 】 按钮 。 





个 国 w9 个 人 痢 所 ，imagesv 局 


| an wv 


Bietoi 
加 ightprg 
二 [到 


文 作 (Ni| top gif 





STEP|13 选择 第 2 行 第 1 列 单元 格 , 执行 【插入 】 
|【 图 像 】 命 令 ， 选 择 图 像 文 件 ， 单 击 【确定 】 








er SET 
EE Ee 


STEP|14 选择 第 2 行 第 3 列 单元 格 . 为 其 插入 一 
张 图 像 . 并 在 【属性 】 面 板 中 将 【水平 设置 为 【 右 
对 齐 】。 
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~| BT 汪汪 二 二 志和 


站 人 - 
STEP|15 选择 第 3 行 中 的 所 有 单元 格 ， 单 击 【 属 
性 】 面 板 中 的 【合并 所 选单 元 格 】 按 钮 合并 单元 
格 并 为 其 添加 图 像 。 





























v BT 总 拒 汪 二 权 ( 
~ Om Ett 














ma a 


STEP|16 制作 表格 内 容 。 选 择 第 2 行 第 2 列 单元 
格 , 在 【属性 】 面 板 中 ,设置 单元 格 的 宽 、 高 和 垂 
直 对 齐 格式 。 




















STEP| 人 7 执行 【插入 】| 【表格 】 命 令 ， 在 弹出 的 
【表格 】 对 话 框 中 . 设置 表格 尺寸 . 并 单 击 【 确 定 】 
按钮 。 


















































STEP|18 在 【属性 】 面 板 中 , 将 Align 设置 为 【 居 
中 对 齐 】， 同时 将 Class 设置 为 tbg。 











EEE) 
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NE 
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‘| 
有 涵 


STEP|19 合并 第 1 行 中 的 所 有 单元 格 . 在 【属性 】 
面板 中 设置 单元 格 的 背景 颜色 和 高 度 值 。 同时 . 在 
单元 格 中 输入 文本 ， 并 设置 文本 的 加 粗 格式 。 
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STEP|20 根据 简历 设计 要 求 .合并 相应 的 单元 
格 . 并 分 别 设置 不 同 单元 格 的 不 同 背景 颜色 。 


















































STEP|21 选择 第 2 行 第 1 列 单元 格 , 在 【属性 】 
面板 中 设置 单元 格 的 属性 ， 并 输入 文本 内 容 。 
























[oy) 
| 本 四 无 ci ET 
Bs Do) Be “GB 
| FD Sema ne 























STEP|22 选择 第 2 行 第 2 列 单元 格 ， 输 入 文本 内 
容 , 并 在 【属性 】 面 板 中 设置 单元 格 的 基本 属性 和 
【类 】 属性。 使 用 同样 的 方法 ， 分 别 制作 其 他 表格 
内 容 。 








个 人 简历 












































i | 一 一 一 | ee 
es 时 个 2 DW 0 My 
Cr 

<y wm] | 格式 因 [无 加 
Bs DD) | 







































































: 网 页 制作 与 网 站 组 奸 


网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 


下 大 练习 : 制作 购物 车 页 


用 户 在 网 络 商城 购物 时 ， 需 要 将 当前 所 需 购 买 的 商品 放 在 购 
物 车 中 ， 以 便 选 择 完 所 有 的 商品 后 一 次 性 支付 购物 款项 。 此 时 ， 
购物 网 站 会 通过 一 个 表格 将 用 户 所 购买 的 商品 逐个 列举 ， 并 计算 
总 额 供用 户 查看 和 支付 。 在 本 练习 中 ， 将 详细 介绍 使 用 表格 功能 
制作 购物 车 网 页 的 操作 方法 。 


3 
: 汪 东 东 网 Ei 雯 号 核对 订单 信息 了 成 功 提交 订单 


CC 2015 中 文 版 ) 从 新 手 到 高 手 : 


手 





| 
































@ 插入 表格 
届 到 的 购物 车 @ 设置 表格 属性 
扳 挑 选 的 商品 @ 插入 图 像 
a 匡 下 到 @ 创建 CSS 样式 
HT ¥ 购买 /三条 
¥24 ¥ 诬 二 而 I 


¥m| 0 1 RANI 





重量 人 证; See 原生 时 ; 10, 03 0 -下 珊 :; ¥¥0 00 元 
两 品 包 全 苦 ( 不 信 运 遍 ); 站 10, 023.80 元 
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yopyrighte20 东 东 质 权 所 
操作 步骤 “》》》 STEP|02 在 【属性 】 检 查 器 中 ， 将 Align 设置 为 
STEpP|01 制作 表格 结构 . 将 光标 置 于 ID 为 carList 【居中 对 齐 】。 
的 Div 层 中 。 执 行 【插入 】|【 表 格 】 命 令 ， 设 置 


































































































表格 尺寸 ， 单 击 【 确 定 】 按 钮 。 
Table [Lx] 
表格 大 小 i 
表格 宽度 | |100 | 百分比 v 
边框 粗细 - 0 
单元 格 边 距 - 4 
单元 格 间距 :|[! 。 | 国 
标题 
无 左 顶部 
STEP|03 选择 所 有 单元 格 . 在 【属性 】 检 查 器 中 ， 
车 要 设置 【背景 颜色 】 为 【白色 】 (#HEEEEEP) 。 
@ 单 击 
Y 
Eu CR | 
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TC .ni 


EXITE 站 ED | 
| [CD 设 二 | 
| 


互让 本 古 ov 高 W | 衣 蜂 口 
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标题 他 ) 口 






























































STEPI04 选择 第 1 行 和 最 后 1 行 所 有 单元 格 . 在 STEPI07 单 击 【 属 性 】 面 板 中 的 【合并 所 选单 元 
【属性 】 检 查 器 中 .设置 【背景 颜色 】 为 【 蓝 色 】 。 格 】 按 钮 ， 合并 最 后 1 行 的 单元 格 并 输入 相应 的 
(#ebBlfb) 。 文本 。 

Ei et a ee ee Sm 







































<>yme | nl ulist :bl 

了 cs] mpi J lew | me 上 回 
到 同好 加 由 0 独 
eo 中 认 x| 高 | 书 旺 2] 门 





STEPI05 设置 第 1 行 
【 宽 】 为 9%， 


所 有 单元 格 的 【高 】 为 35、 
输入 文本 并 将 【属性 】 面 板 中 的 【水 
平 】 选 项 设置 为 【居中 对 齐 】。 




















i 





屋 性 
[Om] tn | 
E33 D1) 无 























STEP|06 设置 最 后 1 行 的 【高 ] 均 为 40. 并 将 【 属 
性 】 面 板 中 的 【水 平 】 选 项 设置 为 【 右 对齐 】。 





| 
| 
| 
| 
| 
| 
| 
: 
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重量 名 计 : 43218 原则 全 新; 站 10023.807t -反观 ! 0 
商品 驴 全 逢 (不 含 运 典 ]: ns 





STEP|08 同时 选择 第 2~9 行 的 第 3~7 列 单元 格 ， 
在 【属性 】 面 板 中 ,将 【水 平 】 选 项 设置 为 【居中 
分 别 输入 相应 的 文本 ， 并 依次 调整 列 宽 。 


对 齐 】. 














家 二 四 [天 S| 
Bs DD 
元 格 。 水 平 


车 和 TDD Ham ,tan | 
一 一 光 看 二 俯 中、 ”~ 高 妈 ” 二 和 是 加 口 





















STEP|09 设置 CSS 样式 。 在 【CSS 设计 器 】 面 板 
中 ， 单 击 【 添 加 选择 器 】 按 钮 ， 添 加 名 为 .font3 的 
选择 器 ， 并 在 【属性 】 面 板 中 设置 其 字体 颜色 。 
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[TT| 文本 








font-family 
font-style 
font-variant 





font-weight 
font-sze 
line-height 
text-align 
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STEP|10 使 用 同样 的 方法 .分 别 设置 font4 和 font5 
的 文本 样式 。 然 后 将 第 1 行 所 有 单元 格 的 【类 】 设 
置 为 font3， 将 第 2~9 行 的 第 2 列 的 【类 】 设 置 为 
font5， 将 第 3 列 的 【类 】 设 置 为 font4。 
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练习 1: 导入 外 部 数据 
全 downloads\11\ 新 手 训练 营 \ 导 入 外 部 数据 
提示 : 本 练习 中 ， 首 先 执行 





新 手 训 练 营 


1doctype htnl> A 
<html> 

3 <head> 

4 <neta charset="u 

5 ”<title> 我 的 主页 </ 
<style typerntext/caan> 








【Excel 文档 】 命 令 ， 


【文件 】| 【导入 】| 
在 弹出 的 【导入 Excel 文档 】 对 


话 框 中 ,选择 Excel 文 件 , 单 击 【打开 】 按 钮 。 然 后 . 





在 【设计 】 视 图 中 ,选择 所 有 表格 内 容 . 
面板 中 的 【水 平 】 设 置 为 【居中 对 齐 】, 
文本 的 字体 格式 。 最 后 ,在 【代码 】 视 图 














个 表格 ,在 【属性 】 面 板 中 将 单元 格 之 间 
为 1。 


人 事 资 料 统计 表 
身份 证 号 码 4 


员工 娟 号 。 站 名 性别 

000001 。 多 男 。 Jo0000197912239002 1979 
000002 名 能 女 。 1000o0197802280002 1978 
000003 。 下 其 。。 00000192412090001 1934 
00004 。 锦 香 。。 男 100000198001280001 1930 
000005 和 孙 作 。 男 100000197?09020001 。 1977 
000008 驯 侍 让。 100000197612040002 1976 
og007 。 付 红 男 Jog0o9l9860814000l 。 1996 
000008 。 种 伟 。 男 100000196802260001 1968 
000009 ”所 云 。 男 。。 100000197906080001 。 1979 
000l10 。 张 晶 。 女 100000198212120000 1932 
oot0tl 。 郑 志 出 。 男 1000o0198801090001 。 1998 
0000l2 。 王 去 。 去。 100000198110100002 1981 
onl3 。 齐 住 。 男 。。 10000019790s0dD001 1979 
000014 。 际 旭 。 男 100000197412230001 1974 
000l5 启明 。 生 。 100000197604030001 。 1976 
00015 。 志明 男 100000198307180001 。 198S 
00001? 。 床 少 滨 。 男 100000197716130001 1977 
o000l8 。 保 侍 。 男 J00000197701130061 1977 
00l9 。 张 拔 。 女 。 log000198412230002 1384 
000020 ”和 芯 。 男 1000o0197a08080001 。 197 


练习 2: 制作 个 人 主页 





将 【属性 】 

并 设置 标题 
中 , 选择 整 
的 空间 设置 


学 历 
专科 
但 十 
本 科 
研 十 
本 科 
本科 
本 科 
硕士 
本科 
本 科 
硕士 
而 十 


本 科 
专科 


全 downloads\1 人 新手 训练 营 \ 个 人 主页 


提示 : 





在 本 练习 中 . 首先 新 建 空白 文档 . 


设置 文 


档 的 页 面 属 性 并 在 【代码 ] 视 图 中 输入 CSS 样式 代码 。 























8 .tdbg 
background-inage: url(images/left?.gif); 





pdy ,td ,th 
font-size: 14px; 


body { 
margin-teft: Opx; 
nargin-top: 6px; 
nargin-right: px; 
nargin-botton: Opxs 


</style> 
</head> 











后 ,插入 一 个 2 行 4 列 的 表格 . 合并 
所 有 的 单元 格 , 并 在 该 单元 格 中 插入 表 头 图 





着 . 在 第 2 行 第 1 列 和 第 4 列 中 插入 图 像 . 
元 格 的 属性 。 





第 1 行 中 
像 。 紧 接 
并 设置 单 





nT 





EE TP re TT PN PP TE PN Tt RR 
EE Be E E 上 




















最 后 , 设置 第 2 行 第 2 列 单元 格 的 属性 . 并 在 其 











中 插入 一 个 11 行 1 列 的 表格 ， 并 设置 每 个 单元 格 的 
内 容 和 CSS 样式。 同时. 设置 第 2 行 第 3 列 单元 格 的 
属性 ,为 其 插入 一 个 6 行 4 列 的 表格 , 并 分 别 为 每 个 
单元 格 插入 图 像 和 输入 文本 。 
OO 
EE 首 守 而 首页 -> 的 季 友 站 
EN 

四 汪汪 伤 认 恒 

EE sr 

和 | 我 的 大 学 Ai em rn jle 

加 和 | 学 TS 

加 AR 请 他 LR 
| i 2 

加 Sk Fen prow Fow now 

时 ; ;. 

EE 9 V2 NA 国 











练习 3: 制作 登录 界面 
全 downloads\11\ 新 手 训练 营 \ 登 录 界面 


提示 : 在 本 练习 中 , 首先 新 建 一 个 空白 文档 . 并 
执行 【插入 】IETMLIERAME 命令 , 插入 一 个 浮动 杠 


架 。 然 后 ,在 【代码 】 视 图 中 ， 输 入 表示 浮动 框架 大 
小 和 和 链接 地 址 的 代码 。 最 后 , 保存 文档 ， 按 F12 键 预 
览 最 终 效 果 。 





练习 4: 排序 数据 
全 downloads\11\ 新 手 训 练 营 \ 排 序数 据 
提示 : 在 本 练习 中 . 首先 新 建 空白 文档 . 执行 【 插 


入 】| 【表格 】 命 令 . 插入 一 个 12 行 11 列 的 表格 。 然 
后 ,在 表格 中 输入 数据 ， 并 在 【属性 】 面 板 中 设置 单 
元 格 区 域 的 背景 颜色 。 最后. 选择 表格 . 执行 【命令 
| 【排序 表格 】 命 令 . 在 弹出 的 【排序 表格 】 对 话 框 中 
将 【排序 按 】 设 置 为 【 列 11】. 将 【顺序 】 设 置 为 【 按 
数字 排序 】， 单 击 【 确 定 】 按 钮 后 ， 表 格 中 的 数据 即 
按 总 成 绩 的 升序 进行 排列 。 











第 11 章 传统 方式 布局 

















企业 规章 法 社 财务 电脑 | 基 
编号 。 搜 和 名。 报 论 制度 知识 知识 操作 礼仪 管理 
018760 。 王 / 童 4 58 19 6 80 了 i 549 
018759 康 8 85 80 75 69 g2 76 79.43 556 
018766 东方 祥 80 76 83 85 81 67 92 80.57 564 
0la788 赵刚 87 23 85 81 6 85 280 80.86 566 
0187655 苏 户 79 82 85 7 78 86 84 81.43 570 
018753 邯 和 和 88 78 9 的 80 83 90 82.57 578 
018751 。 李 图 加 30 77 8 30 87 84 80 83.14 562 
018762 郑 诡 9 8 83 8 75 79 85 83.57 585 
018764 王 浩 8 86 Bl 92 91 84 80 8486 594 
018767 李 宏 9 80 89 80 78 83 85 $85.29 597 
018758 刘 韵 % 76 8 85 8 86 92 8657 606 
练习 5: 制作 软件 下 载 页 
全 downloads\11\ 新 手 训 练 营 \ 软 件 下 载 页 
提示 : 在 本 练习 中 ,首先 打开 素材 文件 ， 删 除 


Div 显示 文本 ,插入 一 个 Div 层 . 并 设置 其 CSS 属性 
样式 。 输 入 文本 ， 并 设置 文本 的 链接 属性 。 然 后 ， 插 
入 多 个 Diy 层 . 设置 CSS 属性 样式 . 插入 图 片 . 输入 
文本 并 设置 其 属性 。 


Ee 
首页 分 类 | 迭 行 榜 TT 








生 软 件 
;特首 页 下 这 了 县 无 统 葵 疝 单 百 广 福 V50 更 机 并 戏 工 上 分享 二 全 】 简体 中 文明 区 更 折 




















最 后 ,依次 插入 多 个 Div 层 . 输入 文本 ,设置 
CSS 和 文本 属性 。 同 时 ,插入 图 片 . 设置 图 片 属 性 并 








在 图 片 后 方 依次 输入 相应 的 文本 。 











直上 百 共 名 可 全， 包括 了 各 本 入 点 ， 宰 外 流质 , 折 动 关机 等 办 4 
上 际 状 开 所 罕 沟 牟 ， 一 点 ， 下 载 ， 直 挫 合 用， 无 办 安 某 ， 后续 合用， 了 


rr 


hr 


总 新 以 守 | 软件 排行 | 广告 科 务 | 拼 交 软件 加 入 站 可 | 友 届 从 接 
让 Hgi adaaBnabsteeag 避 所 有 辣 JCP 革 000736fX 生 三 和 联系 -13095593658X 














在 互联 网 中 ,多数 网 站 都 会 使 用 动态 网 页 技术 ,通过 读 取 数 据 库 中 的 内 容 ， 自动 更 新 网 页 。 常 见 的 
动态 网 页 技术 的 种 类 繁多 ,包括 ASP、ASPnet、PHP 和 JSP 等 。 这 些 动态 网 页 技术 ， 很 多 都 会 通过 表 
单 实现 与 用 户 的 交互 . 获取 或 显示 各 种 信息 。 本 章 将 详细 介绍 在 网 页 中 应 用 表单 元 素 的 操作 方法 和 基础 
知识 ， 从 而 协助 用 户 制作 各 类 具有 交互 功能 的 网 页 。 





3::; 第 12 章 ， 设计 表单 元 素 





国 2 | 添加 表单 





表单 是 实现 网 页 互动 的 元 素 , 通过 与 客户 端 或 
服务 器 端 脚本 程序 的 结合 使 用 ， 可 以 实现 互动 性 。 
表单 有 两 个 重要 组 成 部 分 :一 是 描述 表单 的 HIML 
源 代码 ， 二 是 用 于 处 理 表单 域 中 输入 的 客户 端 肢 
本 ,如 ASP。 


12.1.1 表单 概述 


当 用 户 在 Web 浏览 器 中 显示 的 Web 表单 中 输 
入 信息 ,然后 单 击 【 提 交 】 按 钮 时 . 这 些 信息 将 被 
发 送 到 服务 器 , 服务 器 中 的 服务 器 端 脚本 或 应 用 程 
序 会 对 这 些 信息 进行 处 理 。 服 务 器 向 用 户 (或 客户 
端 ) 发 回 所 处 理 的 信息 或 基于 该 表单 内 容 执行 某 些 
其 他 操作 ， 以 此 进行 响应 。 

表单 是 一 种 特殊 的 网 页 容器 标签 .用 户 可 以 插 
入 各 种 普通 的 网 页 标签 . 也 可 以 插入 各 种 表单 交互 
组 件 , 从 而 获取 用 户 输入 的 文本 . 或 者 选择 某 些 特 
殊 项 目 等 信息 。 

表单 支持 客户 端 /服务 器 关系 中 的 客户 端 。 用 
户 在 Web 浏览 器 (客户 端 ) 的 表单 中 输入 信息 后 . 
单 击 【提交 】 按 钮 ， 这 些 信息 将 被 发 送 到 服务 器 。 
然后 , 服务 器 中 的 服务 器 端 脚 本 或 应 用 程序 会 对 这 
些 信息 进行 处 理 。 

服务 器 向 用 户 (或 客户 端 ) 返回 所 请 求 的 信息 
或 基于 该 表单 内 容 执行 某 些 操作 ， 以 此 进行 响应 。 


服务 岩 处 理 衣 昌 

















表单 
Pm] EEEE 
x] 站 
[Ew EEEE 
[Uma | == 












































服务 区 











表单 可 以 与 多 种 类 型 的 编程 语言 进行 结合 . 同 
时 也 可 以 与 前 全 的 脚本 语言 合作 . 通过 脚本 语言 
速 控制 表单 内 容 。 在 互联 网 中 , 很 多 网 站 都 通过 表 
单 技术 进行 人 机 交互 . 包括 各 种 注册 网 页 、 登 录 网 





页 、 搜 索 网 页 等 。 


国 次 迎 注册 网 易 通行 证 证 
请 入 择 钨 的 用 户 名 





通行 证 用 户 名 ,“ @ [sicom 国 


享受 VIP 忧 先 服务 保障 , 推荐 注册 VIP 邮箱 » 
抢 注 9 数字 看 号 ,人 名 帐号 《 付费 ) > 











请 填写 安全 设置 (以 下 信息 对 保护 您 的 帐号 安全 极力 重要 ， 请 您 慎重 填写 并 牢记 ) 
登录 密码 ,“ 
重复 登录 密码 ,“ 
~ 
< > 
12.1.2 插入 表单 


了 解 了 表单 的 基础 知识 之 后 ,用户 便 可 以 在 网 
页 中 添加 表单 了 , 包括 插入 表单 域 、 插 入 表单 标签 
和 插入 域 集 等 内 容 。 
1. 插入 表单 域 

通过 表单 可 以 实现 网 页 互动 .当然 在 制作 网 页 
时 用 户 需要 先 添加 一 个 表单 域 , 将 表单 元 素 放置 到 
该 域 , 用 于 告诉 浏览 器 这 一 块 为 表单 内 容 。 网 页 中 
的 所 有 表单 元 素 必须 存在 于 表单 域 中 , 否则 将 无 法 
实现 其 作用 。 

在 网 页 中 选择 所 需 插 入 表单 域 的 位 置 . 在 【 插 
入 】 面 板 中 的 【表单 〗】 选 项 卡 中 , 单 击 【 表 单 】 按 
钮 ， 即 可 在 指定 位 置 插入 一 个 红色 的 表单 。 
































网 页 制作 与 网 








插入 表单 域 之 后 ， 如 果 在 【设计 】 视 图 中 无 
法 显示 表单 域 ， 则 可 以 通过 执行 【查看 】| 
【 可视化 助理 】|【 不 可 见 元 素 〗】 命 令 ， 来 显 


示 表 单 域 。 





除了 使 用 【插入 ]】 面 板 中 的 按钮 来 插入 表单 域 
之 外 , 用 户 还 可 以 通过 编写 代码 来 插入 表单 域 。 即 

















在 【代码 ] 视图 中 . 通过 <form> 标 签 插入 表单 内 容 。 

















插入 表单 域 之 后 ， 选 择 表单 域 ， 可 在 【属性 】 
面板 中 设置 表单 域 的 属性 。 




















属 性 


Action (动作 ) 





中 ,【 属 性 】 面 板 中 各 表单 域 属性 选项 的 具 
体 含义 ， 如 下 表 所 述 。 





作 用 

表单 在 网 页 中 唯一 的 识别 
标志 ， 只 可 在 【属性 】 检 查 
器 中 设置 

发 送 表 单数 据 ， 其 值 采用 
URL 方式 。 在 大 多 数 情况 
下 ， 该 属性 值 是 一 个 HTTP 
类 型 的 URL, 指向 位 于 服务 
器 上 的 用 于 处 理 表单 数据 
的 脚本 程序 文件 或 CGI 程 
序 文件 





默认 


POST 


使 用 浏览 器 默认 的 方式 来 
处 理 表单 数 

表示 将 表单 内 容 作 为 消息 
正文 数据 发 送 给 服务 器 





Method 
(方法 ) 
GET 





246 








把 表单 值 添加 到 URL 中 ， 
并 向 服务 器 发 送 GET 请 求 。 
因为 URL 被 限定 在 8192 个 
字符 之 内 ， 所 以 不 要 对 长 表 
单 使 用 GET 方法 


: :网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 


续 表 






定义 在 未 命名 的 新 窗口 中 
打开 处 理 结果 
定义 在 父 框 架 的 窗口 中 打 
开 处 理 结果 

定义 在 当前 窗口 中 打开 处 
理 结 果 

定义 将 处 理 结果 加 载 到 整 
个 浏览 器 窗口 中 ， 清 除 所 有 
框架 
设置 发 送 表单 到 服务 器 的 
媒体 类 型 ， 它 只 在 发 送 方法 
为 POST 时 才 有 效 ， 其 默认 
值 为 ”application/x-www- 
form-urlemoded 。 如 果 要 创 
建文 件 上 传 域 ， 应 选择 
multipart/form-data 

定义 表单 及 其 中 各 种 表单 
对 象 的 样式 
用 于 选择 当前 提交 内 容 的 
编码 方式 ， 如 UTF-8 或 者 
ISO-8859-1 
如 当前 没有 内 容 显示 ， 将 该 
标题 内 容 显 示 
如 果 用 户 启动 该 选项 ， 则 当 
输入 表单 内 容 时 不 进行 验 
证 操作 
当 用 户 启 动 该 选项 时 ， 表 单 
元 素 将 对 输入 过 的 内 容 进 
行 自动 提示 功能 


















Target 
(目标 ) 













Enctype (编码 类 型 ) 


Class (类 ) 










Accept Charset 
(编码 ) 












Title (标题 ) 





No Validate 
(没有 验证 ) 





Auto Complete 
(自动 完成 ) 


表单 的 编码 类 型 是 体现 表单 中 数据 内 容 上 传 
方式 的 重要 标识 。 如 用 户 设置 表单 的 【方法 】 为 默 
认 的 Get 方 法 后 . 该 编码 类 型 的 设置 是 无 效 的 。 而 
如 果 用 户 设置 表单 的 【方法 】 为 Post 方法 ， 则 可 
以 通过 编码 类 型 确定 数据 是 上 传 到 服务 器 数据 库 
中 .还 是 同时 存储 到 服务 器 的 磁盘 中 。 

2. 插入 表单 标签 

用 户 创建 表单 域 之 后 . 即 可 向 表单 域 中 添加 表 
单元 素 。 但 是 . 在 添加 表单 元 素 之 前 ,用户 需 要 先 
添加 表单 元 素 的 名 称 . 如 在 文本 框 之 前 显示 “姓名 
或 者 “用 户 名 ”， 则 表示 该 文本 需要 输入 的 内 容 。 


























::::; 第 12 章 设计 表单 元 素 





在 网 页 中 选择 所 需 插 入 表单 标签 的 位 置 . 在 
【插入 】 面 板 的 【表单 】 选 项 卡 中 . 单 击 【 标 签 ] 在 编写 代码 时 ， 其 <label> 标 签 的 for 属性 应 
按钮 。 此 时 ,将 切换 至 【 拆 分 】 视 图 . 在 代码 中 将 当 与 表单 元 素 的 id 属性 相同 。 
显示 所 添加 的 <label></label> 标 签 。 


EE 














3. 插入 域 集 

当 表 单 中 所 插入 的 内 容 比 较 多 且 没有 好 好 规 
划 时 . 其 整体 会 显得 杂乱 无 章 。 此 时 , 用户 可 以 使 
用 “ 域 集 ”功能 . 来 解决 上 述 问 题 。 其 中 .“ 域 集 
主要 功能 是 对 表单 元 素 中 的 内 容 进行 分 组 , 生成 一 
组 相关 的 表单 元 素 。 

在 【插入 ] 面板 的 【表单 选项 卡 中 , 单 击 【 域 
集 】 按 钮 。 然 后 , 在 弹出 的 【 域 集 】 对 话 框 中 , 输 
入 标签 名 称 ， 单 击 【 确 定 】 按 钮 即 可 。 








全 办 | 姓 幸 口 






<p>kmbspi< /p> 
<p 
anbspT 


se 
1 </bo 











ty Ham Ham [LE 





在 <label></label> 标 签 之 间 ， 用 户 可 以 输入 表 
单元 素 的 名 称 ， 如 输入 “用 户 名 : 。 

<label> 标 签 为 <input> 标 签 定义 标注 (标记 ) , 
它 不 会 向 用 户 呈 现任 何 特殊 效果 。 不 过 , 它 为 鼠标 
用 户 改进 了 可 用 性 如果 用 户 在 <label> 标 签 内 单 击 
文本 , 就 会 触发 此 控件 。 也 就 是 说 ， 当 用 户 选择 该 














标签 时 , 浏览 器 会 自动 将 焦点 转 到 和 标签 相关 的 表 站 rr— 
单 控件 上 。 | Bp Hs) eter 说 © Ci mv 
CE 此 时 ,在 表单 中 可 以 看 到 一 个 “基本 信息 ”的 


loctype html> 







» S 边框 ,用 户 可 在 边框 内 添加 基本 信息 的 表单 元 素 
er, 


</head> 



































nt WR rnt BD EL 可 Ci .mv 


PP 妇 导 添加 文本 和 网 页 元 素 


人 时 从 本 二 下 各 12.2.1 添加 文本 元 素 
而 网 页 元 素 则 是 用 来 显示 登录 密码 、 搜 索 对 象 、 电 

子 邮 件 等 网 页 常用 对 象 的 。 在 网 页 的 表单 中 . 最 常见 的 即 为 文本 域 . 通过 

文本 域 可 以 直接 获取 用 户 输入 的 各 种 文本 信息 ,一 

般 情况 下 . 文本 域 可 以 分 为 单行 文本 域 和 文本 区 
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域 等 。 
1. 添加 单行 文本 域 
在 网 页 中 选择 所 需 插入 单行 文本 域 的 位 置 ,在 





【插入 】 面 板 的 【表单 】 选 项 卡 中 . 单 击 【 文 本 ] 
按钮 。 此 时 ， 在 表单 域 中 将 显示 所 添加 的 文本 域 . 
且 在 文本 域 前 面 自动 添加 了 标签 内 容 。 
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选择 文本 域 . 根据 设计 需求 更 改 前 面 的 文本 内 
容 , 同时 可 以 在 【属性 】 面板 中 设置 文本 域 的 属性 。 
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在 文本 域 的 【属性 】 面 板 中 , 主要 包括 下 表 中 
的 一 些 选项 。 








: :网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 








续 表 
表单 中 的 某 个 表单 域 被 设 定 为 
人 disabled, 则 该 表 音域 的 值 就 不 会 
被 提交 
过 表单 文本 域 是 必 填 项 ， 提 交 表 单 
人 时 ， 若 此 文本 天 为 空 ， 那 么 将 所 
示 用 户 输入 后 提交 
ec 当 用 户 启动 该 选项 时 ， 表 单元 素 
Ee 将 对 输入 过 的 内 容 进行 自动 提示 
(自动 完成 ) 
功能 
Auto Focus 当 页 面 加 载 时 ， 该 属性 使 输入 焦 
(自动 对 焦 ) 点 移动 到 一 个 特定 的 输入 字段 
Read Only 不 允许 用 户 修改 操作 ， 不 影响 其 
(只 读 ) 他 的 任何 操作 
ee 选择 当前 文档 中 ， 需要 操作 的 表 


单 
pattern 属性 规定 用 于 验证 输入 字 
段 的 模式 。 模 式 指 的 是 正则 表达 
i 


Pattern (模式 ) 





Tab Index 3 a 
(序列) 定义 Tab 键 的 选择 序列 
List (列表 ) 定义 与 该 文本 域 进行 关联 的 列表 I 


2. 添加 文本 区 域 

在 Dreamweaver 中 ， 用 户 可 以 使 用 文本 区 域 
对 象 . 来 获取 网 页 中 较 多 的 文本 信息 。 文本 区 域 是 
文本 域 的 一 种 变形 ,不仅 可 以 显示 位 于 多 行 的 文 
本 , 而 且 还 可 以 通过 滚动 条 组 件 , 实现 拖 动 查看 输 



























































名 称 功 能 入 内 容 的 功能 。 
文本 域名 称 是 程序 处 理 数据 的 依 在 网 页 中 选择 所 需 插入 文本 区 域 的 位 置 ， 在 
Name (名 称 ) | 站， 全 吉 “六 本 下 入 澡 史 内 。 【插入 】 面板 的 【表单 】 迹 项 卡 中 ， 单 击 【文本 区 
a 域 】 按 钮 ， 即 可 在 表单 中 插入 一 个 文本 区 域 。 
Max Length 。 | 设置 文本 框 内 所 能 填写 的 最 多 字 二 让 
(最 多 字符 数 ) | 符 数 ee a 
Size 设置 此 域 的 帘 度 有 多 少 字符 , 于 上 
(字符 宽度 ) 。 | 认为 24 个 字符 的 长 度 Tm | 
Value 为 默认 状态 下 填写 在 单行 文本 框 
(初始 值 ) 中 的 文字 目 
Title 用 于 描述 当前 内 容 无 法 显示 时 ， 轩 
(说 明文 字 ) | 所 使 用 的 文字 提示 内 容 
Place Holder | 对 表单 元 素 所 期 望 达到 的 效果 进 选择 插入 的 文本 区 域 对 象 , 可 以 在 【属性 】 面 
(期 望 档 述 ) 。 | 行 描述 板 设置 文本 区 域 的 属性 。 其 属性 与 单行 文本 域 的 属 











性 十 分 类 似 ， 用 户 只 需 修改 Rows ( 行 数 ) 、Cols 
(一 行文 本 的 字数 ) ， 以 及 设置 Wrap (文本 方式 ) 
属性 ,设置 提交 的 文本 区 域内 容 是 否 换行 操作 等 。 


























添加 网 页 元 素 


在 网 页 中 ， 表 单 中 除了 文本 区 域 和 文本 域 之 
外 , 还 包含 非常 多 的 网 页 元 素 . 如 密码 框 . 地 址 栏 、 
电话 、 搜 索 等 。 

1. 添加 表单 密码 

在 创建 登录 页 面 时 ， 需 要 创建 一 个 密码 文本 
域 ， 以 方便 用 户 通过 网 站 验证 获取 所 使 用 的 网 页 
权限 。 

密码 类 型 的 文本 域 与 其 他 文本 域 在 形式 上 是 
一 样 的 , 用 户 在 向 文本 域内 输入 内 容 时 . 密码 类 型 
的 文本 域 则 不 显示 输入 的 实例 内 容 , 只 显示 输入 的 
位 数 。 

在 网 页 中 选择 所 需 插 入 表单 密码 的 位 置 ， 在 
【插入 】 面 板 的 【表单 】 选 项 卡 中 . 单 击 【密码 】 
按钮 , 即 可 在 表单 指定 的 光标 位 置 插入 该 文本 域 对 
象 ， 该 文本 域 对 象 会 在 对 象 前 面 自动 显示 
“Password:” 名 称 。 






































2. 添加 URL 对 象 

URL 对 象 用 于 包含 URL 地 址 的 输入 域 。 当 用 
户 提交 表单 时 .系统 会 自动 验证 URL 域 的 值 是 否 
为 正确 的 格式 。 

在 网 页 中 选择 所 需 插入 URL 对 象 的 位 置 . 在 
【插入 】 面 板 的 【表单 】 选 项 卡 中 . 单 击 Url 按钮 
即 可 插入 一 个 URL 对 象 。 








::: 第 12 章 ”设计 表单 元 素 












































URL 类 型 只 验证 协议 ,不 验证 有 效 性 。 当 用 
户 直接 输入 内 容 时 ， 它 会 自动 添加 “http:/” 头 协 
议 。 例 如 , 在 URL 文本 框 中 输入 baidu.com.cn。 
We | 
fm :本 豆 


和 十 加 o 4 | localhoayFy 寺 SUVURLhtml ] 归 -| ecoosj al 








URL: [sad con. en 
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ee” ol ~ 
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此 时 . 当 鼠 标 离开 文本 框 时 , 系统 将 在 内 容 前 
面 自动 添加 “http:/” 头 协议 。 
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5 @ |Vev(00%) ~ 一 -一 
3. 添加 Tel 对 象 


Tel 对 象 明 面 上 是 要 求 输入 一 个 电话 号 码 ， 但 
实际 上 它 与 文本 域 没 太 大 区 别 . 并 不 存在 特殊 的 

在 网 页 中 选择 所 需 插入 Tel 对 象 的 位 置 ,在 【 插 
入 】 面 板 中 的 【表单 】 选 项 卡 中 ， 单 击 Tel 按钮 
即 可 插入 一 个 URL 对 象 。 
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4. 添加 搜索 对 象 
搜索 对 象 是 专门 为 搜索 引擎 输入 关键 字 而 定 
义 的 文本 框 ， 它 与 Tel 对 象 一 样 , 没有 特殊 的 验证 
规则 。 
在 网 页 中 选择 所 需 插 入 搜索 对 象 的 位 置 .在 
【插入 】 面 板 中 的 【表单 】 选 项 卡 中 . 单 击 【 搜 索 】 
按钮 ， 即 可 插入 一 个 搜索 对 象 。 


DEL 





















































添加 搜索 对 象 后 , 浏览 网 页 时 . 用 户 可 以 在 浏 
览 器 中 看 到 Search 框 。 在 该 文本 框 中 输入 搜索 内 
容 后 , 在 文本 框 的 后 面 将 显示 一 个 【关闭 ] 符 号 Xx 。 
此 时 ,如 果 用 户 单 击 该 【关闭 】 符 号 , 则 可 以 清除 
框 中 所 输入 的 搜索 内 容 。 





| 所 礼 @ Dfiley//F:/Dreamweaver%20CC 标 准 教程 /site/index.htw 属 三 
Url: 


Tel; 
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5. 添加 数字 对 象 

在 HIML 5 之 前 ， 如 果 用 户 想 输入 数字 的 话 ， 
只 能 通过 文本 域 来 实现 。 并 且 . 还 需要 用 户 通过 代 
码 进行 内 容 验证 ， 并 转换 格式 等 。 但 有 了 number 
类 型 时 . 用 户 可 以 非常 方便 地 添加 包含 数值 的 输入 
域 。 用 户 还 能 够 设 定 对 所 接受 的 数字 的 限定 . 例如 
限定 允许 范围 内 的 最 小 值 、 最 大 值 等 。 

在 网 页 中 选择 所 需 插入 数字 对 象 的 位 置 ， 在 
【插入 】 面 板 的 【表单 】 选 项 卡 中 ， 单 击 【 数 字 】 
按钮 ， 即 可 插入 一 个 数字 对 象 。 
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插入 数字 对 象 之 后 .选择 该 对 象 . 则 可 以 在 【 属 
性 】 面 板 中 设置 数字 限定 属性 。 


















规定 合法 的 数字 间隔 
(如 果 step="3"， 则 合法 
的 数 是 -3,0,3,6 等 ) 


6. 添加 范围 对 象 

范围 对 象 是 一 种 某 一 范围 内 的 数据 选择 器 , 它 
可 以 将 输入 框 显示 为 滑动 条 , 以 供用 户 对 数据 进行 
选择 。 范 围 对 象 和 数字 对 象 类 似 , 也 具有 最 小 值 和 








最 大 值 选择 范围 的 限定 。 

在 网 页 中 选择 所 需 插 入 范围 对 象 的 位 置 ， 在 
【插入 】 面 板 的 【表单 】 选 项 卡 中 ， 单 击 【 范 围 】 
按钮 ， 即 可 插入 一 个 范围 对 象 。 

































































7. 添加 颜色 对 象 
颜色 对 象 可 以 在 网 页 中 为 用 户 提供 一 个 颜色 
选择 器 ， 以 方便 用 户 根据 需要 选择 不 同 的 颜色 。 
在 网 页 中 选择 需要 插入 颜色 对 象 的 位 置 . 在 
【插入 】 面 板 的 【表单 】 选 项 卡 中 . 单 击 【 颜 色 】 
按钮 ， 即 可 插入 一 个 颜色 对 象 。 












































插入 颜色 对 象 之 后 , 通过 浏览 器 可 以 看 到 . 在 
Color 对 象 后 面 显示 一 个 颜色 图 块 。 此 时 . 单 击 该 
图 块 ， 即 可 弹出 【颜色 】 对 话 框 。 
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设计 表单 元 素 





Email 对 象 用 于 应 该 包含 Email 地 址 的 输入 
域 。 在 提交 表单 时 . 需要 时 会 自动 验证 Email 域 的 
值 是 否 符合 格式 要 求 。 
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9. 添加 隐藏 对 象 

隐藏 对 象 用 于 存储 用 户 输入 的 信息 ， 如 姓名 、 
电子 邮件 地 址 等 . 并 在 该 用 户 下 次 访问 页 面 时 使 用 
这 些 数据 。 

在 网 页 中 选择 所 需 插 入 隐藏 对 象 的 位 置 ， 在 
【插入 】 面 板 的 【表单 】 选 项 卡 中 ， 单 击 【 隐 藏 】 
按钮 ， 即 可 插入 一 个 隐藏 对 象 。 


























在 注册 页 面 或 者 登录 页 面 中 . 如果 需 要 用 户 输入 
Email 地 址 时 ,需要 添加 很 多 验证 代码 。 而 在 HIML 5 
里 面 ，Email 将 成 为 一 个 标签 ， 可 以 直接 使 用 。 

在 网 页 中 选择 所 需 插 入 电子 邮件 对 象 的 位 置 . 
在 【插入 】 面 板 的 【表单 】 选 项 卡 中 , 单 击 【 电 子 









































邮件 】 按 钮 ， 即 可 插入 一 个 电子 邮件 对 象 。 
i 
到 单 了 
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在 隐藏 域 的 【属性 】 面 板 中 ， 用 户 可 以 将 默 
认 的 值 放置 到 Value 文本 框 中 。 然 后 ， 在 接 
收 页 面 中 可 以 接收 到 该 值 内 容 。 





10. 添加 文件 对 象 

文件 对 象 是 由 文本 框 和 “浏览 ”按钮 组 成 的 ， 
主要 用 来 输入 本 地 文件 路 径 . 并 通过 表单 对 该 文件 
进行 上 传 。 

在 网 页 中 选择 所 需 插入 文件 对 象 的 位 置 ， 在 
【插入 】 面 板 的 【表单 】 选 项 卡 中 ， 单 击 【 文 件 】 
按钮 ， 即 可 插入 一 个 文件 对 象 。 













































选择 所 插入 的 文件 对 象 , 可 在 【属性 】 面 板 中 
设置 文件 对 象 的 各 属性 。 








区 | 区， 











文件 对 象 属性 中 的 各 选项 与 其 他 属性 选项 大 
体 相同 . 其 中 Multiple 选项 为 HTML5 新 增 的 表单 
属性 ,启用 该 复 选 框 可 以 接受 多 个 值 : 而 Required 
选项 也 是 HTML5 新 增 的 表单 属性 . 启用 该 复 选 框 
需要 在 提交 表单 之 前 设置 相应 的 数值 。 





Ip 姑 类 添 加 日 期 和 时 间 元 素 


在 最 新 版 的 Dreamweaver 中 ， 新 增加 了 对 日 
期 和 时 间 进 行 操作 的 表单 对 象 。 用 户 可 以 分 别 添加 
月 、 周 、 日 、 时 间 等 对 象 内 容 。 


12.3.1 添加 月 和 周 对 象 


在 Dreamweaver 中 ， 添加 月 对 象 即 在 网 页 中 
显示 一 个 月 选择 器 , 而 添加 周 对 象 即 在 网 页 中 显示 
一 个 周 选择 器 。 

1. 添加 月 对 象 
在 网 页 中 选择 所 需 插入 月 对 象 的 位 置 , 在 【 插 












































入 】 面 板 的 【表单 】 选 项 卡 中 ， 单 击 【月 】 按 钮 
即 可 插入 一 个 月 对 象 。 
汪汪 
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插入 月 对 象 之 后 , 在 网 页 中 所 显示 的 月 对 象 为 
一 个 文本 域 , 但 是 在 浏览 器 中 月 对 象 所 显示 为 “---- 
年 -月 ”。 


RE EPE 
© © 0 fle mn 少 |v 轿 . 上 tiQL 
名 必 宇 ”久生 三公 众 力 1B - Dre - Bs - mt ”月 二 二 和 全 
bo| ia + BB 
Wl: 

Te 显示 








此 时 ,在 浏览 器 中 单 击 月 对 象 中 的 下 拉 按 钮 ， 
即 可 弹出 日 期 选择 器 ， 用 于 方便 用 户 选 择 相应 的 
月 份 。 
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2. 添加 周 对 象 

在 网 页 中 选择 所 需 插入 周 对 象 的 位 置 , 在 【 插 
入 】 面 板 的 【表单 】 选 项 卡 中 ， 单 击 【 周 】 按 钮 ， 
即 可 插入 一 个 周 对 象 。 
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插入 周 对 象 之 后 . 在 网 页 中 所 显示 的 周 对 象 为 
一 个 文本 域 . 但 是 在 浏览 嚣 中 周 对 象 显示 为 “---- 
年 第 -- 周 "。 此 时 .在 浏览 器 中 单 击 周 对 象 中 的 下 
拉 按 钮 . 即 可 弹出 日 期 选择 器 . 用 于 方便 用 户 选择 





























相应 的 周 信息 。 
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添加 日 期 时 间 对 象 


在 Dreamweaver 中 ,日 期 时 间 对 象 包括 【日 
期 对 象 】 【时间 对 象 〗 【日 期 时 间 对 象 〗 【本 地 日 
期 时 间 对 象 】4 种 网 页 元 素 。 

1. 日 期 对 象 

在 网 页 中 插入 日 期 对 象 后 ,会 显示 一 个 日 期 选 
择 器 。 

在 网 页 中 选择 所 需 插 入 日 期 对 象 的 位 置 ， 在 
【插入 】 面 板 的 【表单 】 选 项 卡 中 . 单 击 【 日 期 】 
按钮 ， 即 可 插入 一 个 日 期 对 象 。 
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此 时 ， 用户 可 以 在 浏览 器 查看 到 Date 对 象 内 
容 , 并 在 文本 框 中 显示 “年 1 月 1 日 ”信息 。 单 击 
后 面 的 下 拉 按 钮 , 即 可 弹出 日 期 选择 器 . 以 方便 用 
户 选择 相应 的 日 期 。 
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设计 表单 元 素 





2. 时 间 对 象 

在 网 页 中 插入 时 间 对 象 后 , 会 显示 一 个 时 间 选 
择 器 。 

在 网 页 中 选择 所 需 插 入 时 间 对 象 的 位 置 ， 在 
【插入 】 面 板 的 【表单 】 选 项 卡 中 ， 单 击 【 时 间 】 
按钮 ， 即 可 插入 一 个 时 间 对 象 。 
































用 户 可 以 通过 浏览 器 显示 所 插入 的 时 间 对 象 , 
并 在 页 面 中 显示 “--:-- 。 此 时 , 用 户 可 通过 单 击 微 
调 按钮 ， 来 调整 网 页 时 间 。 


调整 网 页 时 间 之 后 ， 用 户 可 以 通过 单 击 【 清 
除 〗 按 钮 X ， 来 清除 所 设置 的 时 间 内 容 。 
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3. 日 期 时 间 对 象 
在 网 页 中 插入 日 期 时 间 对 象 后 . 
含 时 区 的 完整 的 日 期 时 间 选 择 器 。 
在 网 页 中 选择 所 需 插入 日 期 时 间 对 象 的 位 置 ， 
在 【插入 】 面 板 的 【表单 】 选 项 卡 中 . 单 击 【 日 其 
时 间 】 按 钮 ， 即 可 插入 一 个 日 期 时 间 对 象 。 





会 显示 一 个 包 
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网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 


此 时 . 在 浏览 器 中 . 用 户 可 以 看 到 日 期 时 间 对 
象 类 似 于 一 个 文本 域 . 直接 在 文本 框 中 输入 日 期 和 
时 间 内 容 即 可 。 
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4. 本 地 日 期 时 间 对 象 

在 网 页 中 插入 本 地 日 期 时 间 对 象 后 ,会 显示 一 
个 不 包含 时 区 的 完整 的 日 期 时 间 选 择 器 。 

在 网 页 中 选择 所 需 插 入 本 地 日 期 时 间 对 象 的 
位 置 , 在 【插入 】 面 板 的 【表单 】 选 项 卡 中 , 单 击 
【本 地 日 期 时 间 】 按 钮 ， 即 可 插入 一 个 本 地 日 期 时 
间 对 象 。 











页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 : 
































此 时 . 通过 浏览 器 . 可 以 看 到 在 网 页 中 所 显示 
的 日 期 时 间 (当地 ) 对 象 为 一 个 选择 器 。 单 击 其 后 
的 下 拉 按钮 , 即 可 选择 日 期 内 容 . 并 通过 微调 按钮 
来 设置 当前 的 时 间 。 
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多 数 用 户 都 知道 ,在 网 页 中 除了 一 些 输入 文 
本 、 日 期 或 时 间 外 . 还 包含 很 多 选择 项 和 按钮 如 
单 选 按钮 、 多 选项 、 提 交 按钮 等 。 下 面 .将 详细 介 
绍 在 网 页 中 添加 选择 与 按钮 元 素 的 操作 方法 。 


12.4.1 添加 选择 元 素 


选择 元 素 主 要 用 于 选择 网 页 内 容 . 包括 选择 对 
象 、 单 选 按钮 、 单 选 按钮 组 、 复 选 框 、 复 选 框 组 等 
选择 元 素 。 

1. 选择 对 象 

选择 对 象 主要 以 下 拉 列 表 的 方法 来 显示 多 种 
选项 , 它 以 滚动 条 的 方式 . 在 有 限 的 空间 中 尽量 提 
供 更 多 选项 ， 非 常 节省 版 面 。 

在 网 页 中 选择 所 需 插入 选择 对 象 的 位 置 .在 
【插入 】 面 板 的 【表单 】 选 项 卡 中 ， 单 击 【 选 择 】 
按钮 ， 即 可 插入 一 个 选择 对 象 。 
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插入 选择 对 象 后 . 选择 该 对 象 , 在 【属性 】 面 
板 中 单 击 【 列 表 值 】 按 钮 。 然 后 ,在 弹出 的 【列表 
值 】 对 话 框 中 , 输入 项 目 列表 . 并 通过 单 击 由 按钮 
来 增加 列表 项 .最 后 单 击 【 确 定 】 按 钮 即 可 。 
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国 四 SG | CE 
CE [@Y 过 4E 司 
销售 部 
财务 部 
萨 划 部 

帮助 0 




















i:;; 第 12 章 


在 【列表 值 〗 对 话 框 中 ， 用 户 还 可 以 通过 单 





击 忆 按 钮 ， 来 删除 所 选 列表 项 ， 同 时 通过 单 
击 世 和 加 按钮 ， 来 上 移 或 下 移 所 选 列表 项 。 

















此 时 , 用 户 按 Fl12 键 . 即 可 通过 浏览 器 来 查看 
下 拉 列 表 的 最 终 效果 . 单 击 下 拉 按 钮 . 即 可 在 弹出 
的 下 拉 列 表 中 选择 相应 的 选项 。 
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另外 ,选择 选择 对 象 ， 在 【属性 】 面 板 中 启用 
Multiple 复 选 框 . 即 可 将 下 拉 列 表 更 改 为 列表 选项 。 
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此 时 , 在 浏览 器 中 , 用 户 将 发 现 所 创建 的 下 拉 
列表 将 自动 更 改 为 列表 形式 ， 并 显示 所 有 的 列表 
选项 。 
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3 设计 表单 元 素 
2. 单 选 按钮 


单 选 按钮 也 是 一 种 选择 性 表单 对 象 . 它 以 组 的 
方式 出 现 , 只 允许 选中 其 中 一 个 单 选 按钮 。 当 用 户 
选中 某 一 个 单 选 按 钮 时 . 其 他 单 选 按钮 将 自动 转换 
为 未 选中 的 状态 。 

在 网 页 中 选择 所 需 插 入 单 选 按钮 对 象 的 位 置 . 
在 【插入 】 面 板 的 【表单 】 选 项 卡 中 ， 单 击 【 单 选 
按钮 】 按 钮 ， 即 可 插入 一 个 单 选 按钮 对 象 。 
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此 时 , 选中 单 选 按钮 后 面 的 文本 . 更 改 文本 内 
容 。 同时 使 用 该 方法 插入 多 个 单 选 按 钮 ,以 组 成 一 









































个 完整 的 单 选 按钮 选项 组 。 
RCI RE 
by ES 
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在 网 页 中 选择 单 选 按钮 中 的 “ 圆 点 ” 符号 . 然 
后 在 【属性 】 面 板 中 启用 Checked 复 选 框 , 使 当前 
所 选单 选 按钮 变 为 默认 选择 状态 。 























列表 可 以 设置 默认 显示 的 内 容 , 而 无 需 用 户 


单 击 弹出 。 如 果 列 表 的 项 目 数 量 超出 列表 的 
高 度 ， 则 可 以 通过 滚动 条 进行 调节 。 








3. 单 选 按钮 组 

在 网 页 中 选择 所 需 插入 单 选 按钮 组 对 象 的 位 
置 . 在 【插入 】 面 板 的 【表单 】 选 项 卡 中 , 单 击 【 单 
选 按钮 组 】 按 钮 。 然 后 ,在 弹出 的 【 单 选 按钮 组 】 
对 话 框 中 . 设置 相应 选项 . 单 击 【 确 定 】 按 钮 即 可 。 








网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 














单 选 按钮 组 
sm | 本 
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布局 , 使 用 : 图 换行 特 ( <br 标 答 ) 
口 更 将 











在 【 单 选 按钮 组 】 对 话 框 中 , 主要 包括 下 表 中 
的 一 些 选项 。 








选 项 作 用 
名 称 用 于 设置 单 选 按钮 组 的 名 称 
标签 ”| 单 选 按 馈 后 的 文本 标签 
值 在 选中 该 单 选 按钮 后 提交 给 
服务 器 程序 的 值 
ee | 添加 单 选 按钮 
贡生 
坊 和 “| 思 删除 当前 选择 的 单 选 按钮 
将 当前 选择 的 单 选 按钮 上 移 
一 个 位 置 
日 将 当前 选择 的 单 选 按钮 下 移 
一 个 位 置 
_ | 定义 多 个 单 碗 按钮 间 以 换行 
sa | | 
使 用 | 表 习 | 定义 多 个 单 达 按钮 通过 表格 
进行 布局 
4. 复 选 框 


复 选 框 是 一 种 允许 用 户 同 时 选择 多 项 内 容 的 
选择 性 表单 对 象 . 它 在 浏览 器 中 以 矩形 框 表 示 。 插 
入 复 选 框 时 , 用 户 可 以 先 插 入 一 个 域 集 . 再 将 复 选 
框 或 者 复 选 框 组 插入 到 域 集中 . 以 表示 为 这 些 复 选 
框 添加 标题 信息 。 

在 网 页 中 选择 所 需 插 入 复 选 框 对 象 的 位 置 .在 
【插入 】 面 板 的 【表单 】 选 项 卡 中 , 单 击 【 复 选 框 】 
按钮 ， 即 可 插入 一 个 复 选 框 对 象 。 
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;网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 : 








插入 复 选 框 之 后 . 可 在 【属性 】 面 板 中 . 通过 
启用 checked 复 选 框 的 方法 . 使 当前 所 选 复 选 框 变 
为 默认 选择 状态 。 























5. 复 选 框 组 

复 选 框 组 与 单 选 按钮 组 在 设置 上 是 类 似 的 .其 
两 者 的 区 别 在 于 : 单 选 按钮 组 中 只 能 选择 一 个 选 
项 .而 复 选 框 组 中 可 以 选择 多 个 选项 或 者 全 部 
选项 。 

首先 , 在 网 页 中 选择 所 需 插入 域 集 的 位 置 , 在 
【插入 】 面 板 的 【表单 】 选 项 卡 中 ， 单 击 【 域 集 】 
按钮 。 在 弹出 的 【 域 集 】 对 话 框 中 , 输入 标签 文本 ， 
并 单 击 【确定 】 按 钮 。 
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然后 . 将 光标 定位 在 域 集 中 , 在 【插入 】 面 板 
的 【表单 〗】 选 项 卡 中 , 单 击 【 复 选 框 组 】 按 钮 。 在 
弹出 的 【 复 选 框 组 】 对 话 框 中 , 设置 相应 选项 . 单 
击 【确定 】 按 钮 即 可 。 




















有 局 ,使 用 : @ 换行 符 ( <br 标 符 ) 
口 雯 将 





























此 时 . 在 文档 中 . 用 户 可 以 看 到 以 换行 符 方式 
显示 的 一 组 复 选 框 内 容 。 









































显示 
口 人 事 部 
口 财务 部 
口 策划 部 
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按 F12 键 之 后 ,用 户 可 在 浏览 器 中 查看 复 选 杠 
组 对 象 的 最 终 状态 , 并 通过 勾 选 选项 来 体验 复 选 框 
组 的 功能 。 
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在 插入 复 选 框 时 , 应 注意 复 选 框 的 名 称 只 允 
许 使 用 字母 、 下 划 线 和 数字 。 在 一 个 复 选 框 


组 中 ， 可 以 选中 多 个 复 选 框 的 项 目 ， 因 此 可 
以 预先 设置 多 个 初始 选中 的 值 。 





12.4.2 ”添加 按钮 元 素 


在 表单 中 录入 内 容 后 , 用 户 需 要 单 击 表单 中 的 
按钮 ， 才 可 以 将 表单 中 所 填写 的 信息 发 送 到 服务 
器 。 而 在 网 页 中 ,按钮 包含 普通 按钮 、“ 提 交 ” 按 
钮 、“ 重 置 ”按钮 和 图 像 按钮 。 

1. 添加 普通 按钮 

在 纯 文本 类 型 的 表单 按钮 中 , 可 以 分 为 button 
和 submit 两 种 类 型 ， 而 普通 的 按钮 则 为 button 

在 网 页 中 选择 所 需 插 入 普通 按钮 对 象 的 位 置 . 
在 【插入 】 面 板 的 【表单 】 选 项 卡 中 . 单 击 【 按 钮 】 
按钮 ， 即 可 插入 一 个 普通 按钮 对 象 。 
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然后 . 将 视图 切换 到 【 拆 分 】 视 图 中 , 在 【 代 
码 】 视 图 中 查看 当前 所 添加 的 按钮 类 型 ， 如 
type="button" 。 











~ , 
= tie 
E 口 人 事 部 





一 0 EH iamy 


2. 添加 “提交 ”按钮 

Submit 类 型 的 按钮 可 以 提交 表单 ， 所 有 称 为 
“提交 ”按钮 。 而 Button 类 型 的 按钮 需要 绑 定 事件 
才 可 以 用 来 提交 数据 。 

在 网 页 中 选择 所 需 插入 “提交 ”按钮 对 象 的 位 
置 . 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 , 单 击 
【 提交 ”按钮 】 按 钮 . 即 可 插入 一 个 “提交 ”按钮 
对 象 。 





























从 外 观 上 看 . 这 两 个 按钮 没有 什么 区 别 . 但 在 
【代码 】 视 图 中 可 以 看 到 两 者 之 间 类 型 不 同 。 当 用 
户 在 单 击 【 提交 ”按钮 】 按 钮 时 ,其 所 插入 的 按 
钮 类 型 为 Submit 类 型 。 
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ji 人 [|| 撤 注 |x| 二 


type= 









Ce 


Submit 类 型 的 按钮 并 不 是 万 能 的 ， 在 某 些 情 
况 下 使 用 Button 绑 定 事件 比 使 用 Submit 类 型 的 按 


;网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 : 





4. 添加 图 像 按钮 
图 像 按钮 主要 用 于 提交 表单 ,如果 使 用 图 像 来 
执行 任务 而 不 是 提交 数据 . 则 需要 将 某 种 行为 附加 
到 表单 对 象 。 
在 网 页 中 选择 所 需 插 入 图 像 按钮 对 象 的 位 置 , 
在 【插入 】 面 板 的 【表单 】 选 项 卡 中 , 单 击 【 图 像 
按钮 】 按 钮 。 在 弹出 的 【选择 图 像 源 按钮 】 对 话 框 
中 .选择 一 个 图 像 文件 . 单 击 【 确 定 】 按 钮 即 可 。 
EE 选 挥 图 像 源 文件 
























































钮 具有 更 好 的 效果 。 例 如， 当 用 户 想 要 在 页 面 中 实 
现 局 部 刷新 时 ， 直 接 使 用 Button 绑 定 事 件 就 可 以 
了 。 但 在 使 用 Button 绑 定 事件 时 ， 当 用 户 触 发 事 
件 的 同时 会 自动 提交 表单 。 相 比 之 下 ，Submit 只 
有 在 需要 表单 提交 时 才 会 带 有 数据 ， 而 Button 默 





认 下 是 不 提交 任何 数据 的 。 
3. 添加 “ 重 置 ”按钮 

在 网 页 中 选择 所 需 插入 “ 重 置 ”按钮 对 象 的 位 
置 , 在 【插入 】 面 板 的 【表单 】 选项 卡 











, 单 击 【 重 





























网 页 中 的 “ 重 置 ”按钮 . 主要 用 于 清除 表单 中 
的 设置 . 方便 用 户 一 次 性 删除 所 有 的 输入 内 容 。 该 
按钮 常用 于 制作 登录 功能 。 


了 DD 和 Hi- 网 ETatic x ec 玫 


C | 日 filey//G:/ 书 稿 /Dreamweaver%20C56 标 准 敦 程 / 光 香 文 好 三 














用 户 音 录 


























© ~ 个 时“ sies ，company v | 搜索 company” Pa 
新 建文 件 夫 给 > 回 @ 

















此 时 . 在 文档 中 , 将 显示 所 插入 的 图 像 . 用 户 
可 以 通过 浏览 器 查看 该 图 像 按钮 方法 。 另 外 , 选择 























该 图 像 , 则 可 以 在 【属性 】 面 板 中 设置 图 像 按钮 的 
属性 。 































用 于 设置 图 像 的 名 称 

指定 要 为 该 按钮 使 用 的 图 像 
用 户 可 以 设置 该 按钮 提交 时 ， 可 
以 执行 的 其 他 操作 
设置 图 像 的 宽度 
设置 图 像 的 高 度 
可 以 选择 表单 中 提交 时 ， 数 据 传 
输 的 类 型 


Form Action 


(提交 执行 动作 ) 









Form Enc Type 
(编码 类 型 ) 








ee 启用 该 复 选 框 后 ,禁止 对 表单 中 
(取消 验证 ) 的 数据 进行 验证 
编辑 图 像 启动 默认 的 图 像 编辑 器 ,并 打开 


该 图 像 文 件 以 进行 编辑 
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续 表 
属 性 名 作 用 

使 用 户 可 以 将 CSS 规则 应 用 于 
Class (类 ) | 
a 表单 中 的 菜 个 表单 域 被 设 定 为 
(亲朋 ) dhsableq 几 该 表征 找 的 信和 砚 不 

会 被 提交 

Auto Focus 当 页 面 加载 时 ,该 属性 使 输入 焦 


(自动 对 焦 ) 点 移动 到 一 个 特定 的 输入 字段 





了 41 症 练 习 : 制作 用 户 注册 页 面 


设计 用 户 注册 页 面 时 ， 不 仅 需要 使 用 文本 字段 和 按钮 等 表单 
对 象 ， 还 需要 使 用 到 项 目 列表 等 表格 对 象 ， 可 以 供用 户 在 页 面 中 
进行 选择 。 除 此 之 外 ， 还 需要 使 用 文本 域 组 件 ， 来 获取 输入 的 大 
量 文本 ， 以 获取 用 户 注册 的 个 人 信息 。 在 本 练习 中 ， 将 通过 
Dreamweaver 中 的 表单 功能 ， 来 制作 一 个 用 户 注册 页 面 。 


注册 | 这 录 | 管理 中 人 插入 表单 

| 插入 文本 
插入 密码 域 
插入 文本 区 域 
插入 按钮 
关联 CSS 规则 


















































操作 步骤 “》》》 i 
STEP|01 插入 Div 标签 。 打 开 素材 文件 ， 将 光标 ON 
置 于 ID 为 registerBG 的 Div 层 中 . 执行 【插入 】 Class Y ] 
IDiv 命令 .输入 ID 名 称 inputLabel, 并 单 击 【 确 定 】 

按钮 。 用 同样 的 方法 . 分 别 创建 inputField 和 











inputComment 的 Div 标签 。 
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:网 页 制 (CC 2015 中 文 版 ) 从 新 手 到 高 手 














STEP|02 将 光标 定位 在 ID 为 inputLabel 的 Div 
层 中 . 输入 文本 内 容 , 并 在 【属性 】 面 板 中 将 【 格 
式 】 设 置 为 【段落 】。 

3 NS 


ee 寺 开 天 有 上 用 
Ys: 















































STEP|06 将 光标 置 于 表单 中 . 单 击 【 插 入 】 面 板 
Ph 的 【文本 】 按 钮 ,插入 文本 表单 元 素 ,并 在 【 属 
性 】 面 板 中 定义 外 。 


ee OCT 





n 



































STEP|03 将 光标 置 于 ID 为 inputComment 的 Div 
层 中 ,输入 文本 ， 并 在 【属性 】 面 板 中 将 【格式 】 
设置 为 【段落 】。 





3 个 字 生 ,和 后 字 凤 ， 千 字 、 下 姑 | 
6h (他 局、 > 
We 

mA Eaithtj， 以 人 fT 








a 











| CH= 7 
EE 和 入 他 家 用 的 Ena 地址， 以 全 下 菇 不 下。 
上 E : C/T 
上 到 加 密码， 请 认真 只 SS ， 1 上 
| 志和 注 夫 ， 清明 .此 证 RR 可 - 
| 自己 ， 责 不 要 这 i 呈 oieled DReowel [wincmekte rom “| 
可 “A Dmroos Jaenony 























> . 
2 人 STEP|07 删除 文本 表单 中 的 文本 内 容 ， 将 光标 定 


位 在 文本 表单 右 侧 ， 将 【属性 】 面 板 中 的 【格式 】 
设置 为 【段落 ] 。 














STEPI04 插入 表单 元 素 。 将 光标 置 于 ID 为 
inputField 的 Div 层 中 , 单 击 【插入 】 面 板 中 的 【 表 
单 】 按 钮 ， 插 入 一 个 表单 容器 。 








ey 


bE 
简要 人 如 作 折 己 ， 请 趟 要 反 100 宁 。 


























STEPI08 在 文本 字段 右 侧 按 组 合 键 
ShifttCtrl+Space， 插 入 一 个 全 角 空 格 ， 并 按 Enter 
键 换行 。 单 击 【 插 入 】 面 板 中 的 【密码 】 按 钮 . 插 
入 密码 表单 .删除 文 本 并 将 ID 设置 为 userPass。 
用 同样 的 方法 . 在 其 下 方 插入 ID 为 rePass 的 密码 
表单 。 


A 四 




















STEP105 选择 表单 容器 ， 在 【属性 】 检 查 器 中 设 
置 其 ID 为 regist. Action 为 javascript:void(null);”。 
















了 上 帮主 所 ， 济 认 入， ME: 
9 已， 坎 7 生 要 di00 字 ， 


a = eas 
全 























STEP|09 在 重复 输入 密码 域 的 右 侧 插入 全 角 空 
格 , 再 按 Enter 键 换行 。 单 击 【 插 入 ]】 面 板 中 的 【 电 
子 邮件 】 按 钮 ， 插 入 电子 邮件 表单 ， 并 在 【属性 】 
面板 中 设置 初始 值 和 ID。 








Ft 
“| asemw: 
好 正三 : 


PFsn, ssas, 
a 
6 忆 ， 再 7 要 dlot 直 、 








Dx 1 














STEP|10 在 电子 邮件 域 右 侧 插入 全 角 空格 ,再 按 
可 车 键 换行 。 单 击 【 插 入 】 面 板 中 的 【选择 】 按 钮 , 
插入 选择 表单 并 在 【属性 】 面 板 中 定义 外。 






























条 要 介绍 个 自己 ,再 下 机 超过 90 于， 
Er KATES 
Ed 加 | | 





口 wmraas Cominpe 











口 pasaed Regired | | 本 








STEP|11 单 击 【 属 性 】 面 板 中 的 【列表 值 】 按 钮 , 
在 弹出 的 【列表 值 】 对 话 框 中 . 设置 列表 内 容 . 并 
单 击 【确定 】 按 钮 。 
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STEP|12 在 列表 菜单 右 侧 输入 一 个 “年 ” 字 , 使 
用 同样 的 方法 插入 一 个 ID 为 bomMonth 的 列表 菜 
单 . 并 在 【列表 值 】 对 话 框 中 设置 列表 内 容 。 


园 
项 目标 签 
1 





汉 
3 
4 
5 














STEP|13 在 列表 菜单 右 侧 输入 一 个 “月 ” 字 ， 完 
成 列表 菜单 的 制作 。 










字符 ( 李 加 、 孝 字 、 下 划 线 ) 。 
十 确信 0, 防 到 


接生 入 你 肖 用 的 Ematttth， 以 全 牧人 
,i MS 

上 上 和 二 几 ， 滞 久久。 是 码 中 仿 
笨 要 介 织 和 自己， 请 不 要 赵 计 100 字 。 





STEP|14 在 列表 菜单 下 方 插入 一 个 文本 表单 ， 删 





除 表单 内 文本 ， 并 在 【属性 】 面 板 中 定义 其 人 D。 








本 
DT 
证. 襄 机 用 Emmat 册 直 | 











td 1 JReoicl [docomskte ram poten 
Doroos Taeadony 
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STEP|15 在 文本 表单 的 下 方 ， 单 击 【 插 入 】 面 板 ”STEPI|18 关联 CSS 规则 。 分 别 选中 D 为 
中 的 【文本 区 域 】 按 钮 ， 插 入 名 为 introduction 的 ” userName 、userPass 、rePass 、 emailAddress 和 
文本 区 域 表单 . 并 在 【属性 】 面 板 中 定义 宽度 和 字 ”instruction 的 表单 . 在 【属性 】 检 查 器 中 , 将 【类 】 
符 数 。 设置 为 widField。 










































































STEP|19 分 别 选中 bomYear、bormMonth 以 及 
STEPI16 在 文本 区 域 表单 下 方 ， 单 击 【插入 】 面 checkCode 三 个 表单 .在 【属性 ] 检查 器 中 将 【类 ] 


板 中 的 【按钮 】 按 钮 ， 插 入 一 个 按钮 并 在 【属性 】 设置 为 namrowField_ 
面板 中 定义 ID 和 值 。 























| 
si Cae 


































入。 站 让 己 让 


EI=R .8 














a STEPI20 插入 验证 图 像 。 在 验证 码 的 表单 右 侧 插 
STEp| 们 在 注册 按钮 右 例 插入 两 个 全 角 空格 ， 单 入 12 个 全 角 空 格 ， 然 后 执行 【插入 】| 【图 像 】 命 


击 【插入 】 面 板 中 的 【按钮 】 按 钮 再 次 插入 一 个 。 令 “选择 图 像 文件 ， 单 击 【 确 定 】 按 钮 ， 插 入 验证 
按钮 并 在 【属性 】 面 板 中 定义 ID 和 值 。 码 的 图 像 。 
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12.6 制作 问卷 调查 表 


调查 表 是 网 络 中 最 常 使 用 的 表格 之 
本 区 域 、 按 钮 、 列 表 或 菜单 等 表单 元 素来 制 f 
以 使 用 单 选 按 钮 组 和 复 选 按 钮 组 等 来 制作 调查 表 ， 为 用 户 提供 客 
观 性 的 选择 ， 从 而 提高 用 户 填写 问卷 调查 的 效率 。 在 本 练习 中 
将 通过 制作 问卷 调查 表 ， 来 详细 介绍 表单 元 素 的 使 用 方法 和 操作 
技巧 。 


练习 : 








田 
&. :其 








户 除了 可 以 使 用 文 
FE 调查 表 之 外 ， 还 可 


























:人 


设计 表单 元 素 








@ 插入 列表 菜单 





首页 | 注册 | 登录 | 联系 方式 






高 精 摄 影 素材 DVD _ 
EE ED BS BS EB OS NCGE3 
感谢 您 花费 的 一 点 时 间 ， 请 告诉 我 们 您 的 真实 想法 与 状况 。 
1 您 今 天 为 什么 访问 艾 章 克 设计 ? 
请 选择 一 个 原因 : 
2. 您 在 我 们 的 网 站 找 有 到 需要 的 信息 了 么 ? 
) 是 的 , 找到 了 一 不 . 还 没有 不 大 确定 找到 的 是 否 有 用 
3. 您 对 我 们 的 网 站 整体 打 多 少 分 ? 
) 10 20 30 0 50 60 7 80 90 100 


4 您 希望 我 们 的 网 站 在 虽 些 方面 进行 改进 ? 
口 更 多 的 产品 展示 [更 新 的 业界 资讯 [] 更 全 的 素材 下 载 [] 更 完善 的 服务 项 目 
口 更 好 的 用 户 体验 呈 ] 更 多 的 设计 理论 [| 更 多 的 服务 功能 [] 更 及 时 的 用 户 反 汕 
5 您 大 的 多 久 会 访问 一 次 我 们 的 网 站 ? 
< 





使 用 单 选 按钮 组 
使 用 复 选 框 组 
设置 文本 格式 
使 用 按钮 





> 








操作 步骤 “》》》 
STEP|01 添加 文本 。 打 开 素 材 文件 ， 在 页 面 的 中 
间 位 置 输入 文本 ， 并 在 【属性 】 面 板 中 将 【格式 】 


STEP|02 添加 列表 菜单 。 按 Enter 键 换行 . 在 【 插 
入 】 菜 单 的 【表单 】〗 选 项 卡 中 ., 单 击 【选择 】 按 钮 。 











设置 为 【段落 】。 











十 放 您 花 或 的 一 
























将 Class 设置 为 


STEPI03 在 【 


属性 】 面 板 中 ,将 JD 设置 为 list， 
labels 。 
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STEP|07 添加 单 选 按钮 组 。 按 Enter 键 换行 ,并 
单 击 【插入 】 面 板 中 的 【 单 选 按钮 组 】 按 钮 。 





































































ee 
5 
目 涛 
加 Pi 
@ 瑟 所 
STEPI04 添加 列表 菜单 内 容 。 选 中 列表 菜单 . 删 , 
除 前 面 的 文本 . 在 【属性 】 面 板 中 , 单 击 【 列 表 值 】 
按钮 ， STEP|08 在 弹出 的 【 单 选 按钮 组 】 对 话 框 中 ， 设 
| 置 按 钮 选项 内 容 ， 并 单 击 【和 确定】 按钮 。 
单 选 按钮 组 
re 
a (Dns) sr 
re 一 | 
二 扫 |7 村 


和 入 














布局 , 使用: 图 | 换行 特 ( <br 标签 )| 








os 1 性 
Ea 

















口 表格 
EE |“ CE STEP|09 然后 ,在 【属性 】 面板 中 .将 [类 ] 设 
STEPI05 然后 ， 在 弹出 的 【列表 值 ] 对 话 框 中 于 为 ba 


设置 列表 内 容 ， 并 单 击 【 确 定 】 按 钮 。 




















1 多 今天 和 9 什么 访问 六 攻克 设计 
国 巨 3 加 | CE 昌 aaaoamaattwssmseT， 
标 Y 目 上 号 的 . 37 口 不 .98 有 〇 不 大 确定 吉利 的 有 用 
项 目标 答 什 上 


564 取消 





2 
购买 或 订购 创意 、 设 计 3 
谈 择 其 他 合 作 或 十 4 a 


请 选择 一 个 原因 : 
寻找 设计 和 创意 的 灵感 1 
寻找 商业 合作 伙伴 








帮助 (8) 








STEP|06 在 列表 菜单 的 右 侧 ， 按 Enter 键 换行 . 


即 可 插入 下 一 个 段落 。 此 时 . 将 【属性 】 面 板 中 的 、 
【类 】 设 置 为 【无 】 并 输入 第 2 个 问题 文本 。 STEP|10 切换 到 【代码 】 视 图 中 ， 删 除 单 选 按钮 


| 组 代码 中 的 <br> 标 签 ， 仿生 夺 革 条 呈 水 玫 掉 到。 
































下 











Radiosroupln 
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STEP|11 使 用 同样 的 方法 . 输入 第 3 个 问题 文本 . 
并 在 该 文本 下 方 插入 一 组 单 选 按钮 组 。 








he TN TN 





Pe ,Ps 






| 。 各 人 天 为什么 沪 且 交友 计 
阳 LSs#-?R: 
2 grim 了? 

口 旺 , 顽 了 口 不 , 二 股 有 
E 全 对 一 们 的 网 站 歼 体 打 多 少 分 ? 


口 不 大 珍 定 乒 到 的 是 否 有 用 








DaoaooDaoDiooDaDau0mnoOmuODwDaio 








添加 复 选 框 组 。 输 入 第 4 个 问题 文本 

















行 后 单 击 【插入 】 面 板 中 的 【 复 选 框 组 】 按 钮 。 
EF 和 息 信 天 为 什么 让 向 可 克 设 计 ? 
ee 
Enos? Re 

| 口 是 ,HE 了 口 不 ,BR 有 全 上， 放量 ~ 
HH i 国庆 年 

el -一 

(Oe el ott] 
i 澡 回 Ra 
自作 EE 
FE DD 几 加 














STEP|13 在 弹出 的 【 复 选 框 组 】 对 话 框 中 ,i 
复 选 框 内 容 ， 并 单 击 【 确 定 】 按 钮 。 














名 称 checkbo| OD 设置 






st 5s 全 
值 加 | 
更 多 的 服务 功能 夏 选 框 
更 及 时 的 用 户 反馈 夏 选 框 
: : 











布局 , 使用- @@ | 换行 特 (<b 标 基 | 
口 表格 

















STEP|14 同样 . 在 【属性 】 面 板 中 将 【类 】 设 置 为 














labels， 并 在 【代码 】 视 图 中 删除 相应 的 <br> 标 签 。 

HB Pe PR ER PR BE FE 二- 开 | 
| 请 兴 科 个: 

EE O 〇 是 ,37 O es 1 hi 有 用 

硅 轩 了 


EE SES SE SS Sr SL SE SE SE 
4 二 项 时 们 的 网 6 在 此 方 和 流行 次 进 ? 


口 更 多 的 产品 属 示 更 新 的 业界 资讯 “|] 更 全 的 素材 下 霸 [] 更 完善 失职 和 项 目 





| 融 的 时 户 杂 验 | | 更 多 的 法 计 理 论 | 更 多 的 本 各 功 条 | | 更 及 时 的 用 户 反 全 

















第 12 章 设计 表单 元 素 
STEP|15 添加 按钮 。 用 同样 的 方法 ， 制 作 其 他 问 
题 。 在 第 7 个 问题 后 换行 . 在 【属性 】 面板 中 将 【类 】 
设置 为 buttonsSet。 































EE 


2) 














STEP|16 在 【插入 ] 面板 中 , 单 击 【 提交 ”按钮 】 
按钮 ， 并 在 【属性 】 面 板 中 设置 Name 选项 。 





























这 jr 


Ds TR TR Re 
三 周 站 和 月 -这 是 我 第 一 次 沪 问 | 
































es From wadste | rom | i 
口 wmoFecm 
STEP|17 切换 到 【代码 】 视 图 中 ， 删 除 “value=" 











提交 "” 代 码 中 的 “提交 。 使 用 同样 的 方法 ， 
“ 重 置 ”按钮 。 


添 力 





二 于 有 全 





rn 

人 大 的 入 全 访问- 次 了 们 的 网 站 由 
口 每 天 〇 3 到 4 天 口 生 周 〇 每 月 〇 更 久 〇 这 是 我 第 一次 访问 

大 罗网 站 未 有 什么 鱼 见 王充， 请 下 采 .我 们 会 第 一 可 回收 天， 








ee 


呈 

8: 

于 和 和 99， 多 半 可 以 间 二 【提交 ] 按时 . 充 所 月 才 和 全 间 党 大 人 配合 我 们 的 工作 . 
7 

电话: +86 +10 627 




















网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 对 








2.1 


练习 1: 添加 域 集 在 弹出 的 对 话 框 中 设置 按钮 组 内 容 和 值 . 并 在 【属性 】 














全 downloads\12\ 新 手 训 练 营 \ 域 集 ”面板 中 设置 其 ID 和 值 。 同 时 ， 在 【问题 类 型 】 栏 中 
提示 ,本 练习 中 ， 首 先 新 建 空白 文档 ， 执 行 【 插 ” 插入 一 个 选择 表单 对 象 . 并 在 弹出 的 对 话 框 中 设置 列 
入 】|1 【表单 】|【 域 集 】 命 令 ， 在 弹出 的 【 域 集 】 对 。 表 内 容 。 
话 框 中 设置 【标签 】 选 项 ， 并 单 击 【 确 定 】 按 钮 。 然 
后 ,选择 域 集 对 象 ， 在 【属性 】 面 板 中 设置 标题 文本 
的 字体 格式 。 最后， 在 【 域 集 】 表 单 中 插入 各 种 表单 
对 象 ， 并 按 F12 键 预览 最 终 效果 。 


es 350 实 全 浏览 器 7.1 文件 查看 履 二 工具 大 允 | 曾 一 口 X | 
© CO Mey//ER 少 v 图 . a 






















站 丰 常 重 委 专业 的 服务 * 
语 48; 生 可 及 尽 可 能 地 所 下 各 夏 僻 。 厅 于 他 对 秩 人 9 一 宙 支 持 ! 

















- 膨 

7 关 f 丰 ，Ne - BI ”月 本 水 介 守 | 
b | © | 口 EX + -于 ) 

用 户 注 册 

昵称 : 

密码 : 

人 : 最 后 , 在 中 间 右 侧 区 域内 插入 一 个 Div 标签 , 定 

电 于 邮箱 : 义 该 标签 的 CSS 规则 , 同时 在 该 标签 内 插入 文本 区 域 

和 按钮 表 元 素 ， 并 分 别 设置 其 属性 。 

和 六 和 次 条 加 晤 VT 二 严 多 已 4) Qi10%0% 


| 搜 易 女 人 社区 
练习 2: 制作 留言 板 [a 

全 downloads\12\ 新 手 训练 营 \ 留 言 
提示 : 在 本 练习 中 ， 首先 打开 素材 文件 , 输入 文 


本 并 定义 CSS 样式 。 单 击 【 表 单 】 按 钮 .插入 表单 元 

















素 。 同 时 ,依次 插入 文本 表单 元 素 ， 并 分 别 设置 每 个 
表单 元 素 的 属性 和 CSS 规则 。 














练习 3: 制作 在 线 调查 表 
全 downloads\12\ 新 手 训练 营 \ 在 线 调查 表 








| 提示 : 在 本 练习 中 . 首先 新 建 空白 文档 . 单 击 【页 
他 面 属性 】 按钮 ， 在 弹出 的 【页 面 属性 】 对 话 框 中 ， 设 

| 。 置 页 而 背景 图 像 、 字 体 大 小 、 链 接 等 属性 。 同时， 在 
| 【代码 】 视 图 中 ， 输 入 CSS 规则 代码 。 








关于 我 站 公司 稍 信 -联系 访 二- 招 了 信息 - 安 六 角 务 -相关 

















然后 . 在 【性 别 】 栏 中 插入 【 单 选 按钮 组 】 表 单 . 
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19 astink { 

2 color: #333; 

71 text-decoration: none; 
22 } 

3 a:visited { 

24 color: #333; 

25 text-decoration: none; 
26 ]} 

27 a:active { 

color: #F90; 
text-decoration: none; 





31 

32 a:hover 
3 text-decoration: underline; 
color: #666; 






36 #container { 
37 margin-left:215px; 网 











然后 ,切换 到 【设计 】 页 面 中 , 插入 一 个 Div 标 
签 , 然后 在 该 标签 内 分 别 插入 4 个 不 同名 称 的 Div 标 
签 。 在 最 上 面 的 Div 标签 内 输入 标题 文本 .并 设置 文 
本 的 字体 格式 。 同时 ,在 第 2 个 Div 标签 内 插入 一 个 
项 目 列表 ,输入 列表 文本 并 设置 文本 的 链接 地 址 。 




















RE 


























S 我 们 提供 的 哪些 眼 务 还 未 能 达到 您 的 满意 
结 | 口 Bi、 可 开 龟 、 率 划 











练习 4: 添加 日 期 和 时 间 元 素 
人 包 downloads\12\ 新 手 训练 营 \ 日 期 和 时 间 元 素 
提示 : 在 本 练习 中 , 首先 新 建 空 白文 档 , 单 击 【页 
面 属性 】 按 钮 ， 在 弹出 的 【页 面 属 性 】 对 话 框 中 , 设 
置 页 面 背景 颜色 .。 然后 , 在 文档 中 插入 一 个 域 集 元 素 ， 

















在 第 3 个 Div 标签 内 输入 问题 文本 , 并 设置 文本 





司 时 在 表单 元 素 中 插入 一 个 日 期 和 时 间 元 素 , 并 修改 
表单 元 素 内 的 文本 。 最 后 , 在 其 下 方 插入 文本 、 密码 、 
电子 邮件 、“ 提 交 ” 按 钮 和 “ 重 置 ”按钮 。 

















登录 状态 界面 
上 次 登录 时 间 : 
登录 名 称 : 
登录 窗 码 ; 
电子 邮箱 


年 /有 /日 图 * 轩 --:-- 图 





的 字体 格式 。 同 时 ,在 每 个 问题 文本 下 面 插入 相对 应 
的 表单 元 素 ， 并 设置 每 个 表单 元 素 的 属性 。 最 后 , 在 
第 4 个 Div 标签 内 输入 版 尾 文本 。 


[提交 ] |[ 重 委 














在 Dreamweaver 软件 中 设计 网 页 , 除了 可 以 通过 可 视 化 的 界面 操作 , 还 可 以 在 【代码 】 视 图 中 使 用 
标记 语言 。 网 页 文档 中 每 一 个 可 视 的 元 素 都 与 XHTML 中 的 标记 相对 应 ,例如 图 像 元 素 可 以 用 <img> 标 
记 表 示 、 表 格 元 素 可 以 用 <table> 标 记 表 示 。 对 于 熟练 使 用 XHTML 的 用 户 而 言 , 使 用 代码 编写 网 页 将 更 
高 效 、 更 便捷 。 本 章 将 详细 介绍 标记 语言 的 文档 结构 、 语 法 规范 、 元 素 分 类 ， 以 及 一 些 常用 的 元 素 ， 通 
过 这 些 元 素 可 以 对 网 页 进行 简单 布局 。 








第 13 章 XHTML 标记 语言 








XHTML 基本 语 ; 





相 比 于 传统 的 HIML 4 语言 , XHTML 语言 的 
语法 更 加 严谨 和 规范 .更 易于 各 种 程序 的 解析 和 
判读 。 
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XHTML 概述 


XHTML (The Extensible HyperText Markup 
Language, 可 扩展 的 超 文 本 标记 语言 . 是 由 HIML 
(Hyper Text Markup Language， 超 文本 标记 语言 
发 展 而 来 的 一 种 网 页 编写 语言 , 也 是 目前 网 络 中 最 
常见 的 网 页 编写 语言 。 

XHTML 用 标记 来 表示 网 页 文档 中 的 文本 及 
图 像 等 元 素 , 并 规定 浏览 器 如 何 显示 这 些 元 素 ,以 
及 如 何 响应 用 户 的 行为 。 

例如 ，<img> 标 记 表 示 网 页 中 的 一 个 图 像 元 
素 ， 也 就 是 说 ， 除 了 执行 【插入 】| 【图 像 】 命 令 . 
或 者 单 击 【 插 入 】 面 板 中 的 【图 像 】 按 钮 国 可 以 在 
网 页 中 插入 图 像 外 , 还 可 以 直接 在 【代码 】 视 图 中 
要 显示 图 像 的 位 置 输入 <img> 标 记 。 

在 Dreamweaver 中 ， 用 户 通常 使 用 【属性 】 
面板 来 设置 网 页 元 素 的 尺寸 、 样式 等 属性 , 而 在 标 
记 中 同样 可 以 设置 网 页 元 素 的 属性 。 

例如 设置 图 像 的 大 小 , 通常 的 做 法 是 在 【属性 】 
面板 的 【宽度 】 和 【高 度 】 文 本 框 中 输入 像素 值 : 
而 在 <img> 标 记 中 只 需 加 入 width 和 height 属性 ， 
并 指定 相应 的 值 即 可 ， 如 <img width = "300px" 
height = "200px">。 

与 其 他 的 标记 语言 HTML 和 XML 相 比 . 
XHTML 兼顾 了 两 者 的 实际 需要 . 具有 如 下 特点 。 

(1) 强大 的 扩展 性 用户 可 以 扩展 元 素 . 从 而 
可 以 扩展 功能 , 但 目前 用 户 只 能 够 使 用 固定 的 预定 
义 元 素 ， 这 些 元 素 基本 上 与 HIML 的 元 素 相同 . 
但 删除 了 描述 性 元 素 的 使 用 。 

(2) 良好 的 兼容 性 ”能够 与 HIML 很 好 地 沟 
通 , 可 以 兼容 当前 不 同 的 网 页 浏览 器 . 实现 正确 浏 
览 XHTML 网 页 。 






































总 之 , XHTML 是 一 种 标准 化 的 语言 , 不 仅 拥 
有 强大 的 可 扩展 性 ,还 可 以 向 下 兼容 各 种 仅 支持 
HTML 的 浏览 器 . 已 经 成 为 当今 主流 的 网 页 设计 


= 
13.1.2 XHTML 文档 结构 


作为 一 种 有 序 的 结构 性 文档 , XHTML 文档 具 
有 固定 的 结构 ， 其 中 包括 定义 文档 类 型 、 根 元 素 、 
头 部 元 素 、 主 体 元 素 4 个 部 分 。 

在 Dreamweaver 中 可 以 直接 创建 包含 有 
XHTML 文档 结构 的 网 页 : 执行 【文件 】|【 新 建 】 
命令 , 新 建 一 个 空白 的 网 页 文档 , 单 击 【代码 】 按 
钮 ， 即 可 看 到 XHTML 的 文档 结构 。 








<!DOCTYPE html PUBLIC "-//W3C//DTD 
XHTML 1.0 Transitional//EN" "http: 
//www.w3.0rg/TR/xhtml1/DTD/ 
xhtmll-transitional.dtd"> 

<! 一 定义 XHTML 文档 类 型 --> 

<html xmlns="http://www.w3.org/ 
1999/xhtml"> 

<! 一 XHTML 文档 根 元 素 ， 其 中 xmlns 属性 声 
明文 档 命名 空间 --> 
<head><! 一 头 部 信息 结构 元 素 --> 

<meta http-equiv="Content-Type" 
content="text/html; charset=utf- 
:ee 

<! 一 设置 文档 字符 编码 --> 
<tit1le> 无 标题 文档 </tit1le><! 一 设置 文 
档 标题 --> 

</head> 


<body> 

<! 一 主体 内 容 结 构 元 素 --> 
</body> 

</html> 
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为 了 便于 理解 ,在 该 段 代码 中 使 用 了 “<!--” 
和 “-->” 对 文档 进行 注释 ,它们 之 间 的 内 容 
不 会 被 浏览 器 解析 。 





在 XHTML 文档 中 , 内 容 主 要 分 为 标签 . 属性 
和 属性 值 三 级 。 
1. 标签 

标签 是 XHTML 文档 中 的 元 素 . 其 作用 是 为 文 
档 添加 指定 的 各 种 内 容 .例如 .输入 一 个 文本 段落 . 
可 以 使 用 <p> 段 落 标签 等 。 


了 ldoctype RENTY 9 
2 <htmU 
ad> 











4 ta charset="utf-B"> 
<title> 无 标题 文档 </title> 
§ </head> 








除 此 之 外 ,在 XHTML 文档 中 ,还 有 <html> 
根 元 素 标签 、<head> 头 部 元 素 标签 和 <body> 主 体 
元 素 标签 等 。 

2. 属性 

属性 是 标签 的 定义 , 它 可 以 为 标签 添加 某 个 功 
能 ,几乎 所 有 的 标签 都 可 添加 各 种 属性 。 例如, 为 
某 个 标签 添加 CSS 样式 、 为 标签 添加 style 属性 。 
3. 属性 值 

属性 值 是 属性 的 表述 ,用 于 为 标签 的 定义 设置 
具体 的 数值 或 内 容 程 度 。 例 如 ， 
属性 中 ，"font-size:18px" 




















“ style="font-size: 18px" ~ 
为 文字 的 样式 属性 值 。 


13.1.3 ”XHTML 文档 类 型 声明 


文档 类 型 声明 是 说 明 当 前 文档 的 类 型 以 及 文 
档 标签 、 属 性 等 的 使 用 范本 . 而 文档 类 型 声明 的 代 
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码 应 放置 在 XHTML 文档 的 最 前 端 。 
1. 过 渡 型 声明 
过 渡 型 的 XHTML 文档 在 语法 规则 上 最 为 宽 
松 , 允许 用 户 使 用 部 分 描述 性 的 标签 和 属性 。 其 声 
明代 码 如 下 所 述 。 
<!DOCTYPE html PUBLTC "-//W3C//DTD 
XHTML 1.0 Transitional//EN" 
"http//www.w3.0org/TR/xhtml1/DTD/ 
xhtmll-transitional.dtd"> 


由 于 过 渡 的 XHTML 文档 允许 使 用 描述 性 的 
标签 和 属性 ， 因 此 其 语法 更 接近 于 HIML 4 


文档 , 目前 互联 网 中 绝 大 多 数 网 页 都 采用 这 
一 声明 方式 。 





2. 严格 型 声明 

严格 型 的 XHTML 文档 在 语法 规则 上 最 为 严 
格 ， 它 不 允许 用 户 使 用 任何 描述 性 的 标签 和 属性 。 
其 声明 代码 如 下 所 述 。 

<!DOCTYPE html PUBLTC "-//W3C//DTD 

XHTML 1.0 Strict//EN" "http//www. 


w3 .org/TR/xhtml1/DTDVxhtm1l1- 
transitional.dtd"> 


3. 框架 型 声明 

框架 的 功能 是 将 多 个 XHTML 文档 嵌入 到 一 
个 XHTML 文档 中 .并 根据 超 链接 确定 文档 打开 的 
框架 位 置 。 框 架 型 的 XHTML 文档 具有 独特 的 文档 
类 型 声明 。 其 声明 代码 如 下 所 述 。 








<!DOCTYPE html PUBLTC "-//W3C//DTD 
XHTML 1.0 Frameset//EN" "http//www. 

w3 .org/TR/xhtml1/DTD/xhtm1l1- 

transitional.dtd"> 


I 时 导 XHTML 语法 规范 和 属性 





XHTML 是 根据 XML 语法 简化 而 成 的 .因此 














它 遵 循 XML 的 文档 规范 。 而 标准 属性 是 绝 大 多 数 








XHTML 标签 可 使 用 的 属性 。 因 此 .在 使 用 
Dreamweaver 编辑 XHTML 代码 之 前 . 还 需要 了 解 
XHTML 语法 规划 和 标准 属性 。 


13.2.1 XHTML 语法 规范 


由 于 XHTML 是 根据 XML 语法 简化 而 来 的 . 
因此 在 编写 XHTML 文档 时 还 应 遵循 以 下 8 条 
1. 声明 命名 空间 

在 XHTML 文档 的 根 元 素 <html> 中 应 该 定义 
命名 空间 , 即 设置 其 xmlns 属性 , 将 XHTML 各 种 
标签 的 规范 文档 URL 地 址 作为 xmlns 属性 的 值 。 























<!DOCTYPE html PUBLTC "-//W3C//DTD 
XHTML 1.0 Transitional//EN" "http 
//www.w3.o0rg/TR/xhtml1/DTD/ 
xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/ 
1999/xhtml"> 


2. 匹配 标签 

在 XHTML 中 .通常 习惯 使 用 一 些 独立 的 标 
签 ， 如 <p>、<li> 等 。 

而 在 XHTML 文档 中 ,这 样 做 是 不 符合 语法 规 
范 的 , 则 必须 使 用 相对 应 的 </p> 和 </li> 标 签 对 其 进 
行 闭合 。 
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3. 所 有 元 素 和 属性 都 必须 小 写 

XHTML 对 大 小 写 十 分 敏感 , 所 有 的 元 素 和 属 
性 都 必须 是 小 写 英文 字母 。 例 如 ，<html> 和 
<HTML> 表 示 不 同 的 标签。 
4. 所 有 属性 都 必须 用 引号 括 起 来 

在 HIML 中 , 可 以 不 需要 为 属性 值 添加 引号 ， 
但 是 在 XHTML 中 则 必须 添加 引号 。 例 如 ，<img 

















src=" 7 horses.jpg" width="649" height="428" 
alt=""/>。 
<1doctype html> ~ 
<html> 
<head> 


4 <meta charset="utf-8"> 


<title> 无 标题 文档 </title> 
</head> 
<body> 站 


"file:///c|/Users/rhy/Pictures/7_horses.jpg" 


width="649" height="428" alt=""/> 
<755qy> 


19 jy: 
IEEI <-/htnmU v 




















在 某 些 特殊 情况 下 〈 如 引号 做 谋 套 ) ， 可 以 


在 属性 值 中 使 用 双 引 号 "或 单 引号 。 





5. 合理 嵌 套 标签 
XHTML 要 求 具有 严谨 的 文档 结构 , 因此 所 有 
的 广 套 标签 都 应 该 按 顺序 。 也 就 是 说 , 元 素 是 严格 
按照 对 称 的 原则 一 层 一 层 地 赃 套 在 一 起 的 。 
错误 赃 套 : 














<div><span></div></span> 





如 果 使 用 单独 不 成 对 的 标签 . 应 该 在 标签 的 最 后 
加 一 个 / ( 斜 杠 ) 对 其 进行 闭合 ， 如 <br>、<img/> 等 。 


工 <ldoctype html> ~ 
2 <html> 





3 <head> 
4 <meta charset="utf-8"> 


<title> 无 标题 文档 </tip 一 一 
heady 


<img src= 





"file:///C|/Users/rhy/Pictures/6_horses.jpg" />| 











正确 嵌 套 : 





<div><span></span></div> 


6. 所 有 属性 都 必须 被 赋值 

在 HIML 中 ， 人 允许 没有 属性 值 的 属性 存在 . 
如 <td mowrop>。 

但 是 . 在 XHTML 中 .这 种 情况 是 不 允许 的 。 
如 果 属 性 没有 值 ， 则 需要 使 用 自身 来 赋值 。 


<td mowrop="mowrop"> 
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7. 所 有 特殊 符号 用 编码 表示 2. 语言 属性 
在 XHTML 中 ， 必 须 使 用 编码 来 表示 特殊 符 XHTML 语言 的 语言 属性 主要 包括 dir 属性 和 
号 ， 如 小 于 符号 < 不 是 元 素 的 一 部 分 ， 必 须 被 编码 ” lang 属性 。 
为 “&lt;” 表 示 : 而 大 于 符号 > 也 不 是 元 素 的 一 部 口 dir 属性 该 属性 的 作用 是 设置 标签 中 文 
分 ， 必 须 被 编码 表示 为 “&gt:”。 未 的 方向 ， 其 属性 值 包括 ltr ( 自 左 向 右 ) 
不 要 在 注释 内 容 中 使 用 --. 该 符号 只 能 出 现在 和 划 ( 自 右 向 左 ) 两 种 。 
XHTML 注释 的 开头 和 结束 。 口 lang 属性 该 属性 的 作用 是 设置 标签 所 
8. 使 用 id 属性 作为 统一 的 名 称 使 用 的 自然 语言 ,其 属性 值 包括 en-us( 美 
XHTML 规范 废除 了 name 属性 . 而 使 用 id 属 国 英语 )、zh-cn (标准 中 文 ) 币 -tw( 繁 
性 作为 统一 的 名 称 。 体 中 文 ) 等 多 种 。 
在 正 4.0 及 以 下 版 本 中 应 该 保留 name 属性 ， 
使 用 时 可 以 同时 使 用 name 和 id 属性 。 在 XHTML 中 ，base、br、frame、frameset、 
一 \ 人 入 层 | hr、iframe、param、noscript 和 script 等 标签 
13.2.2 XHTML 标准 属性 克 注 信用 等 志 关 到 
在 XHTML 语法 规范 中 , 包含 核心 属性 、 语言 
属性 和 键盘 属性 三 类 标准 属性 。 3. 键盘 属性 
1. 核心 属性 在 XHTML 语言 中 ， 键盘 属性 主要 用 于 为 
核心 属性 的 作用 是 为 XHTML 标签 提供 样式 ” XHTML 标签 定义 响应 键盘 按键 的 各 种 参数 。 其 
或 提示 的 信息 ， 主 要 包括 以 下 4 种 。 中 ， 属 性 包括 accesskey 和 tabindex 两 种 。 
口 accesskey 属性 该 属性 的 作用 是 在 浏览 
标签 添加 类 ， 供 脚本 或 CSS 样式 表 页 面 中 设置 访问 标签 的 快捷 键 , 而 用 户 必 
引用 须 与 Alt 键 共同 使 用 。 
标签 添加 编号 名 ， 供 脚本 或 CSS 样 口 tabindex 属 性 ”该 属性 的 作用 是 用 户 在 访 


式 引用 
标签 编写 内 联 的 CSS 样式 表 代 码 
标签 提供 工具 提示 信息 文本 


问 XHTML 文档 时 ,显示 在 网 页 中 的 内 容 ， 
通过 设置 顺序 (数字 大 小 顺序 ), 使 用 Tab 
键 按照 顺序 切换 选择 位 置 。 








在 使 用 上 述 属性 时 ， 用 户 应 该 注意 以 下 三 点 。 
口 dlass 属性 该 局 性 值 是 以 字母 和 下 刘 线 | 键盘 属性 与 其他 属性 一 样 ， 也 存在 使 用 范 国 





人 的 限制 ， 通 常 只 有 在 浏览 器 中 可 见 的 网 页 标 
口 id 属性 该 属性 的 值 与 class 属性 类 似 ， 签 可 以 使 用 键盘 属性 。 

但 它 在 同一 XHTML 文档 中 是 唯一 的 ,不 

允许 重复 。 例如 .在 index.html 文档 的 <body></body> 标 
口 style 属性 该 属性 的 值 为 CSS 代码 。 签 之 间 ， 添 加 如 下 代码 。 


<a accesskey="2Z"href="http://www. 
在 XHTML 中 ,base、head、html、meta、 baidu.com"> 百 度 主页 </a> 
param、script、noscript 等 标签 无 法 使 用 核心 

属性 。 而 当 浏览 该 文件 时 . 用 户 可 以 按 Alt 键 . 同时 
按 Z 键 . 即 可 选择 网 页 中 的 “百度 主页 ”文本 内 容 。 
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: 网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 








350 安 全 济 各 71 > BW 
© [3 GE 人 | 立 口 fleWCAUsersnhy 少 v 图 








Db | © | Bia “|+ C2 
百度 主页 
| Hrs 而 Fh Vf P 所 OD WD Qt : 





XHTML 常用 元 素 
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当 用 户 通 过 快捷 键 . 选择 网 页 中 的 链接 后 , 可 
以 按 Enter 键 来 跳 转 到 指定 链接 的 网 页 中 。 





13.3 


XHTML 网 页 是 由 块 状元 素 、 内 联 元 素 和 可 变 
元 素 组 合 在 一 起 的 。 在 设计 网 页 之 前 . 首先 需要 了 
解 这 些 常用 元 素 。 


13.3.1 块 状 标签 


块 状 标签 是 以 块 的 方式 ( 即 矩 形 的 方式 ) 显示 
的 标签 , 默认 情况 下 块 状 标签 占据 一 行 的 位 置 , 相 
邻 的 两 个 块 状 标签 无 法 显示 在 同一 行 中 。 而 块 状元 
素 作为 其 他 元 素 的 容器 ， 通 常用 来 对 网 页 进行 
布局 。 
1. <div> 标 签 

div (division 的 缩写 ) 是 指 区 划 、 分 割 区 域 。 
在 网 页 文档 中 ，<div> 标 签 是 将 XHTML 文档 划分 
为 若干 个 区 域 ， 使 文档 的 结构 更 具有 条 理性 。 

绝 大 多 数 基于 Web 标准 化 规范 的 网 页 文档 ， 
都 使 用 <div> 标 签 为 网 页 进行 布局 。 

例如 , 用 三 个 div 元 素 划分 了 三 大 块 区 域 . 这 
些 区 域 分 别 属于 版 头 、 主 体 和 版 尾 。 然 后 . 在 版 头 
和 主体 区 域 分 别 又 用 了 多 个 <div> 标 签 再 次 细 分 更 
小 的 单元 区 域 . 这 样 便 可 以 把 一 个 网 页 划分 为 多 个 
功能 模块 。 

<div><!--[ 版 头 区 域 ]--> 


<div><!--[Logo]--></div> 
<div><1!-- [导航 ]--><Vdiv> 




















</div> 
<div><!--[ 主 体 区 域 ]--> 
div > /i 





<div><!-- [模块 2] --></div> 


</div> 

<div> 

<!-- [版 尾 区 域 ]--> 
</div> 


2. <ul>、<ol> 和 <li> 标 签 

<ul>、<ol> 和 <li> 标 签 用 来 实现 普通 的 项 目 列 
表 . 它们 分 别 表示 无 顺序 列表 、 有 顺序 列表 和 列表 
中 的 项 目 。 但 在 通常 情况 下 ， 结 合 使 用 <ul> 和 <li> 
定义 无 序列 表 . 结 合 使 用 <ol> 和 <li> 定 义 有 序列 表 。 

列表 标签 总 是 块 状 标签 ， 其 中 的 <li> 标 签 显 示 
为 列表 项 ， 即 display:list-item， 这 种 显示 样式 也 是 
块 状 标 签 的 一 种 特殊 形式 。 

列表 标签 能 够 实现 网 页 结构 化 列表 , 对 于 常常 
需要 排列 显示 的 导航 菜单 .新 闻 信 息 . 标题 列表 等 , 
使 用 它们 具有 较为 明显 的 优势 。 

无 序列 表 : 








<ul> 
<1i> 项 目 
让 
<1i> 项 目 
<ALIS 
<1i> 项 目 
< 








</ul> 


有 序列 表 : 





页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 


网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 














<ol> 人 <p> 关 于 “香港 ”地 名 的 由 来 ， 有 两 种 流传 较 
<1i> 项 目 眼 2 项 广 的 说 法 。</p> 
/> 7 香港 的 得 名 与 香料 有 关 。 从 明 朝 
<1i> 项 目 上 始 ， 香 港 岛 南部 的 一 个 小 港湾 ， 为 转运 南 
< 0 ee 
<1i> 项 目 料 而 出 名 ,被 人 们 称 为 “香港 "。</p> 
</li> 日 <p> 说 法 二 : 香港 是 一 个 天 然 的 港湾 ， 附 近 有 


避 溪水 甘 香 可 口 ， 海 上 往来 的 水 手 经 常 到 这 里 
</o1> 来 取水 饮用 ， 和 久而久之 ， 甘 香 的 溪水 出 了 名 ， 
这 条 小 溪 也 就 被 称 为 “香江 ”， 而 香江 入 海 冲 
积 成 的 小 港湾 ,也 就 开始 被 称 为 “香港 ".</P> 
列表 标签 一 般 不 单独 使 用 , 因为 单独 的 标签 
不 能 表示 完整 的 语义 ， 同时 在 样式 呈现 上 会 





TN TR 人 rs 
关于 -香江 "地 名 的 出 来 ， 有 也 种 流 伍 较 矿 的 说 法 ， 


说 法 一 ， 理 港 的 得 名 与 理 笠 有 关 ， 
翅 南 恩 埋 笠 的 集散 请 ， 因 转 










出 现 很 多 问题 ， 所 以 不 建议 拆 开 列 表 项 目 单 
独 使 用 。 


埋 浅 马 南部 的 一 个 小 浅 沈 ， 为 特 
车 料 而 出 各， 被 人 们 称 为 韦 活 "。 





3. <dl>、<dt> 和 <dd> 标 签 

<dl>、<dt> 和 <dd> 标 签 用 来 实现 定义 项 目 列 
表 。 定义 项 目 列表 原本 是 为 了 呈现 术语 解释 而 专门 
定义 的 一 组 标签 . 术语 顶 格 显示 、 术 语 的 解释 缩 进 
显示 , 这 样 多 个 术语 排列 时 ， 显得 规整 有 序 . 但 后 ”| 在 Dreamweaver 的 【视图 】 模式 中 , 按 Enter 
来 被 扩展 应 用 到 网 页 的 结构 布局 中 。 键 即 可 创建 一 个 新 的 段落 。 

<dl> 表 示 定 义 列表 ; <dt> 表 示 定义 术语 , 即 定 
义 列表 的 标题 ;<dd> 表示 对 术语 的 解释 . 即 定义 列 ”5- <h1>、 <h2>、<h3>. <h4>.、 <h5> 和 <h6> 
表 中 的 项 目 。 标签 

定义 列表 : <hl1> 至 <h6> 标 签 的 第 1 个 字母 h 为 header( 标 
题 ) 的 首 字母 缩写 ， 后 面 的 数字 表示 标题 的 级 别 。 






























<dl> i Ee 
<dt> 标 题 列表 项 使 用 <h1l> 至 <h6> 标 签 可 以 定义 网 页 标题 ， 其 
</dt> 中 <h1> 表 示 一 级 标题 ， 字 号 最 大 ; <h2> 表 示 二 级 
<dd> 标 题 说 明 标题 ,字号 较 小 ， 其 他 元 素 以 此 类 推 。 
</dd> ~ 标题 标签 是 块 状元 素 .CSS 和 浏览 器 都 预定 义 
[xi 到 ] 
《<dt> 标题 列表 项 了 <h1> 至 <h6> 标 签 的 样式 ，<hl> 标 等 定义 的 标题 
Sa 字号 最 大 ，<h6> 标 签 定义 的 标题 字号 最 小 。 
<dd> 标 题 说明 
</dd> <div align="center"> 
3 <h2> 静 夜 思 </h2> 
</dl> <p> 床 前 明 月 光 ， 
疑 是 地 上 霜 。</p> 
4. <p> 标 签 <p> 举 头 望 明 月 ， 
<p> 标 签 用 来 设置 段落 。 在 默认 情况 下 ， 每 个 低 头 思 故乡 。</p> 
文本 段 都 定义 了 上 下 边界 . 具体 大 小 在 不 同 的 浏览 </div> 
器 中 会 有 区 别 。 
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闭 兰 
语言 




















6. <table>、<tr>、<th> 和 <td> 标 签 
<table>、<tr> 和 <td> 标 签 被 用 来 实现 表格 化 数 
据 显 示 ， 它 们 都 是 块 状 标签 。 

<table> 标 签 表示 表格 . 它 主要 用 来 定义 数据 表 
格 的 包含 框 。 如 果 要 定义 数据 表 整 体 样式 应 该 选择 
该 标签 来 实现 , 而 数据 表 中 数据 的 显示 样式 则 应 通 
过 <td> 标 签 来 实现 。 

<tr> 标 签 表示 表格 中 的 一 行 , 由 于 它 的 内 部 还 
需要 包含 单元 格 , 所 以 在 定义 数据 表格 样式 上 . 该 
标签 的 作用 并 不 太 明 显 。 

<td> 标 签 表示 表格 中 的 一 个 方 格 。 该 标签 作为 
表格 中 最 小 的 容器 元 素 ， 可 以 放置 任何 数据 和 元 
素 。 但 在 标准 布局 中 不 再 建议 用 td 放置 其 他 来 实 
现 广 套 布局 ， 而 仅 作 为 数据 最 小 单元 格 来 使 用 。 


<table width="580" border="1" 
cellpadding="0" cellspacing="0"> 
站 中 
<td>gnbsp;</td> 
<td align="center"><strong> 一 
班 </strong></td> 
<td align="center"><strong> 二 
班 </strong></td> 
<td align="center"><strong> 三 
班 </strong></td> 
<td align="center"><strong> 四 
班 </strong></td> 
<td align="center"><strong> 五 
班 </strong></td> 
</AEr> 
<tre> 
<td align="center"><strong> 评 
分 </ strong></td> 
<td align="center">A</td> 
<td align="center">C</td> 
<td align="center">B</td> 
<td align="center">E</td> 
<td align="center">D</td> 
< /ET 
</table> 







































13.3.2 ”内 联 标签 


内 联 标签 无 固定 形状 . 相 邻 的 多 个 内 联 标签 可 
以 显示 在 同一 行 中 , 它 不 可 以 使 用 CSS 定义 大 小 、 
边框 和 层 夫 顺序 等 。 
1. <a> 标 签 

<a> 标 签 用 于 表示 超 链接 。 在 网 页 中 ，<a> 标 
签 主要 有 两 种 使 用 方法 :一 种 是 通过 href 属性 创建 
从 本 网 页 到 另 一 个 网 页 的 链接 : 另 一 种 是 通过 
name 或 id 属性 .创建 一 个 网 页 内 部 的 链接 。 

外 部 链接 代码 如 下 所 述 : 











<a href="http://www.baidu.com"> 百 
度 一 下 </a> 


内 部 链接 代码 如 下 所 述 : 
<a href="#1ink"> 内 部 链接 </a> 


在 <a> 标 签 中 ,主要 包含 下 表 中 的 一 些 属性 。 





值 
URL 
规定 URL 的 基准 语言 







规定 URL 的 字符 编码 


规定 当前 文档 与 目标 
URL 之 间 的 关系 

规定 目标 URL 与 当前 文 
档 之 间 的 关系 


规定 链接 的 形状 





text 








Default、 rect、 
circle、poly 
_blank 
_parent 
_Self 
_top 
framename 
MIME 编码 
类 型 













target 在 何 处 打开 URL 










规定 目标 URL 的 MIME 
类 型 
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2. <br> 标 签 

<br> 标 签 用 于 表示 换行 。 在 HTML 中 .<br> 
标签 可 以 单独 使 用 。 但 在 XHTML 中 .<br> 标 签 结 
束 必 须 在 结尾 处 关闭 。 








<br /> 
3. <img> 标 签 

<img> 标 签 用 于 表示 在 网 页 中 的 图 像 元素 。 与 
<br> 标 签 相 同 , 在 HIML 中 . <img> 标 签 可 以 单独 
使 用 。 但 在 XHTML 中 .<img> 标 签 必须 在 结尾 处 
关闭 。 





























<img alt=" 图 像 元 素 " src="image. 
jpg" /> 
TT TT 





TT 










| / 
QO 














另外 , 在 XHTML 中 , 所 有 的 <img> 标 签 必须 
添加 alt 属性 ， 也 就 是 图 像 元 素 的 提示 信息 文本 。 
4. <span> 标 签 

<span> 标 签 用 于 表示 范围 ,是 一 个 通用 内 联 元 
素 。 该 标签 可 以 作为 文本 或 内 联 标签 的 容器 . 通常 
为 文本 或 者 内 联 标签 定义 特殊 的 样式 . 辅助 并 完善 
排版 、 修 饰 特定 内 容 或 局 部 区 域 等 。 











<div> 

<span><! 一 -设置 字体 大 小 --> 

<span title=" 标 题 "> 带 标 题 的 文本 
</span> 

<span><strong> 加 粗 显示 
</strong></span> 
<span><em> 和 斜体 显示 </em></span> 
</span> 

</div> 
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13.3.3 ”按钮 标签 


<button> 标 签 是 一 种 特殊 的 网 页 标签 , 用 户 既 
可 以 在 该 标签 中 输入 文本 、 制作 文本 按钮 , 又 可 以 
在 其 中 插入 图 像 、 制 作 图 像 按钮 。 
1. 制作 文本 按钮 

当 <button> 标 签 为 文本 时 ， 该 标签 为 内 联 
标签 。 

















<body> 

<p> 关 于 身体 健康 ， 对 饮食 又 直接 关系 吗 ? 
</p> 

<p><button name="bu" type= 
"submit" value="1">A. 没有 
</button></p> 

<p><button name="bu" type= 
"submit" value="2">B. 有 </button> 
</p> 

<p><button name="bu" type= 
"submit" value="3">C. 有 一 点 
</button></p> 

</body> 


通过 上 述 代 码 . 可 以 在 浏览 器 中 看 到 创建 的 三 
个 按钮 。 





360 人 沿 三 71 》 文人 富 要 由 入 工具 关 助 | 曾 | 一 口交 
© © 合生 filey// |v 圈 .点 此 接 Q_| >» 
pO Dims l=2) 
关于 身体 健康 ， 对 饮食 嗓 鼻 接 关系 吗 了 
人 A 没有 
B. 有 | 
GC 有 -点 
Cd 而 万 ii 要 VE FI 上 WW Qo0% 。 





2. 制作 图 像 按钮 
当 <button> 标 签 为 图 像 时 ， 则 该 标签 为 图 像 





eeee 
eeee 
ee00 
oooe 





<body> 

向 左 请 点 击 : <button name= 
"direction"> 

<img src="10.jpg" width="25" 
height="30" /></button>> 
向 右 请 点 击 : <button name= 
"direction"> 

<img src="4.png" width="25" 
height="30" /><button> 
</body> 





通过 上 述 代 码 , 可 以 在 浏览 器 中 看 到 在 按钮 中 
添加 了 一 个 图 片 内 容 。 


[fp sreN71 
© CD 安 © fley/) 


DIO DA + i 


me || oawss, | 图 | 








ne Ee a TR a [Wx | 


|v 加 -SSQ | 5% 





时 铺 合 训 砍 灯节 jn Vf FF EB EE 4) Qio% 


3. 按钮 属性 
在 <button> 标 签 中 ,可 以 添加 一 些 属性 . 来 标 

识 按 钮 的 信息 及 类 型 。 

值 


name 















规定 禁用 此 按钮 
规定 按钮 的 名 称 


disabled 







button 





规定 按钮 的 类 型 


reset 
submit 
















规定 按钮 的 初始 值 


其 中 ， 用 户 可 以 在 type 属性 中 设置 按钮 的 类 
型 ， 即 按钮 的 作用 。 

例如 , 创建 两 个 按钮 . 一 个 是 提交 按钮 . 一 个 
是 重 置 按钮 。 


<form action="form action.asp 
method="get"> 

用 户 名 : <input type="text" 
name="fname"> 

密 ” 码 : <input type="text" 
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name="password"> 

<button type="submit" value=" 提 交 
"> 提交 </button> 

<button type="reset" value=" 重 置 "> 
重 置 </button> 


</form> 





通过 上 述 代码 ， 可 以 在 浏览 器 中 看 到 两 个 按 
钮 . 当 用 户 单 击 【 重 置 】 按 钮 时 .将 清空 文本 框 中 
的 内 容 。 








mA、 350R 人 3 71 4 i I SW [YD Xx 
© CO 站 fley/ 各 站 v 团 . 太 SQ | 更 多» 
DIO 无 时 是 了 本 BD 
用 户 名 ， 窗 码 加 匡 到 

人 两 Him VE PB DO d) Q 0% 





其 中 , 在 sytp 属性 中 ,各 参数 的 含义 如 下 表 
所 述 。 





表示 提交 按钮 


表示 可 单 击 的 按钮 
表示 重 置 按钮 (清除 表单 数据 ) 





在 Internet Explorer 中 ， 将 提交 <button> 与 
P 


</button> 之 间 的 文本 ， 而 其 他 浏览 器 将 提交 
value 属性 内 容 。 





13.3.4 ”内 联 框架 标签 


<iframe> 标 签 也 是 一 种 特殊 的 网 页 标签 . 其 作 
用 是 为 网 页 文档 谋 入 外 部 的 网 页 文档 , 从 而 实现 内 
访 的 框架 。 
1. 府 入 网 页 

用 户 可 以 使 用 <iframe> 标 签 嵌入 网 络 中 和 站 
点 中 的 网 页 ， 这 两 者 的 区 别 在 于 链接 的 路 径 不 同 。 

例如 . 在 框架 中 嵌入 “ 必 应 ”网 页 .其 代码 如 
下 所 述 。 
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<iframe width="550" height="300" ©) MR 

， 所 C 合 全 加 fley1/Dysites/ 未 命名 站 少 v 图 . 千 此 皖 Q | 于 多 
src="http://www.bing.com"></ = 
DD © | Dh E22 
iframe> 


通过 上 述 代 码 . 可 以 在 浏览 器 中 看 到 在 设置 的 
大 小 尺寸 内 ， 所 链接 的 网 页 内 容 。 


























pS 360 安全 71 ) Nt I [Xx 
© 忆 合 食品 fley1/Dysites/ 未 辣 名 站 乡 v 图 .三 此 党 » i 





丙 区 0 壬 FE 忆捷 口 dW) Ql0% ,; 





Db ©| Dama + 所 > 


”2. <iframe> 属 性 标签 

无 论 是 嵌入 外 部 网 页 ， 还 是 本 站 点 内 的 网 页 
在 其 标签 中 都 可 以 设置 一 些 属性 值 。 例 如, 设置 框 
架 的 宽度 、 高 度 等 。 














属性 作 用 
根据 周 国 的 标签 来 对 齐 该 框架 。 不 
有 赞同 使 用 ， 可 以 使 用 样式 代替 
ee EE frameborder | 规定 是 否 显示 框架 周转 的 边框 
height 定义 <iframe> 标 签 的 高 度 
另外 , 用 户 也 可 以 插入 站 点 内 的 网 页 , 例如 先 规定 一 个 页 面 ， 该 页 面包 含有 关 
创建 一 个 名 为 Untitled-2 .html 的 文档 ， 并 将 该 文档 。 “eee | <iframe> 标 签 的 较 长 描述 
保存 在 本 地 站 点 中 。 然后. 在 当前 文档 中 谋 入 框架 。 _marginheight | 定义 项 部 和 底部 的 边框 
代码 ， marginwidth | 定义 左 侧 和 右 侧 的 边 距 
name 规定 <iframe> 标 签 的 名 称 
<body> scrolling 是 否 在 <iframe> 标 签 中 显示 滚动 条 
<iframe width="550"” height="200" ee 显示 文档 的 URL 
src="Untitled-2.html"></iframe> i 定义 <iftame> 标 签 的 宽度 





</body> 


通过 上 述 代码 , 可 以 在 浏览 器 中 看 到 在 设置 大 
小 尺寸 内 ， 所 链接 的 本 站 点 内 的 网 页 内 容 。 用 户 可 以 在 <iframe> 与 </iframe> 标 签 之 间 放 


置 文本 内 容 ， 以 避免 当 浏 览 器 无 法 理解 
<iframe> 标 签 时 所 出 现 的 错误 显示 。 





BB 全 前 练习 : 制作 友情 链接 页 面 


友情 链接 一 般 以 列表 的 形式 直观 地 展现 在 互联 网 上 ， 它 可 以 
提高 网 站 的 知名 度 和 增加 网 站 的 访问 量 。 有 的 列表 前 有 序号 有 的 
没有 序号 。 本 练习 将 使 用 Dreamweaver 软件 制作 一 个 有 序列 表 的 
友情 链接 页 面 。 
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精美 礼品 坊 2 宫 
首页 





ee : Wa re FE Ei 


送 长 可 送 领 导 送 客户 送 受 人 关子 适 填 友 。。 所 有 礼物 。 4 礼品 。 代 卫 定制 练 习 要 a 
友情 链接 须 洛 
请 接 槛 求 及 说 明 : @@ 添加 <table> 和 <td> 
标签 的 属性 并 赋值 





@ 段落 标签 <p> 的 应 用 
@ <ol><li> 标 签 定义 有 





3 


考 机 之 面 手机 之 宁 手机 要 





序列 表 
1 合作 性 件 > 
@ <Ul><]i> 标 签 定义 
百 虚 声 竺 网 损 运 。 网易 新 沪 网 鸡皮 网 站 动 之 系 ul li 标签 定义 无 
si 序列 表 
及 女 性 晰 省 中 国 尝 乐 网。 革 而 人生。 中 国信 人 两 时 尚 女 人 出。 时 资讯 弹性 天。 时 疝 三 汤 @ <img> 标 签 的 使 用 
3， 数 四 交 站: 


茂生 手机 牛 ” 动 本 油 。 源 肥 电 届 丙 城 数 冯 世界” 数 到 示 龙 


@ <a> 标 签 定义 超 链接 








4 礁 菌 网站 : 
末世 界 网 沽 南 七 人 的 。 国 要 修 酒 项 订 网 “ 自 则 蔷 洲 网 过 情 语 ”天 基 湾 的” 好 山 晤 水 
5 网 后: 
闸 守 网 淘宝 是 店 。 纪 史 网 。 京东 网 
了 71500005 贡品 六 ALIEN 报章 放 可 忆 樟 寻 ， 训 JCFIE01234 村 





操作 步骤 “》》》 





STEP|01 启动 Dreamweaver， 在 欢迎 界面 中 选择 
HTML 选项 ， 创 建 一 个 空白 页 面 。 














STEP|02 然后 ， 在 页 面 下 方 的 【属性 】 面 板 中 . 
单 击 【页 面 属性 】 按 钮 。 













BI 


(EE ] 二 


尾 性 
ti 天 ~ 


bcss 加 无 v| 
实 档 标 町 | 无 标题 文档 










































总 
字体 的 大 小 和 各 种 链接 颜色 。 
页 面 尾 性 Lx 
外 观 〈css) 
让 wm 页面 四 | 吕 上 人 人 可 
(css) 
' eB 大 小 人 
文本 颜色 (IT) 
肖 录 攻 色 电 : 国 | 
RD Bw 
重 县 (了 ) 设置 
去 ibg50D 右边 距 (B) me 
上 3E (p) px 下 边 距 (0) px 
BLT 开 达 ][ 取消 ”||[ 应 用 ] 
页 本 尾 性 | 
分 类 久 接 (css) 
接近 字体 (1): | 加 《 同 页 面 字体 ) v 
| 
“ 帮 = 
变 扩 图 各 榜 接 (8); 本 | [fbala22 | 
活动 接 (); 一 | [W000 
ET 本 到 洒 ] [应 有 W | 























STEP|05 打开 【标题 /编码 】 选 项 卡 ， 在 【标题 】 


STEPI03 在 弹出 的 【页 面 





属性 】 对 话 框 的 【外 观 


(CSS)] 选项 卡 中 . 设置 页 面 文本 大 小 和 文本 颜色 。 





STEPI04 打开 【链接 (CSS)] 


选项 卡 . 设置 链接 





文本 框 中 输入 页 面 标题 ， 并 单 击 


【确定 】 按 钮 。 


STEP|06 切换 至 【代码 】 视 图 .将 光标 放置 在 


<body></body> 之 间 . 通过 插入 <table>、<tr> 和 <td> 





网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 





标签 创建 一 个 5 行 x2 列 的 表格 。 


























| 傣 标题 全 
村 是 四) 
wer) 
提包 
和 本 化 表单 (:)， 区 
OD icode ES GaD G) 








又 伯伯 天 
读 廊 件 志 : Deitestonpany 
LE |] > [三 




















STEPI07 在 <table> 标 签 中 添加 width 、align 、 
cellpadding 和 cellspacing 属性 并 设置 相应 的 值 。 





7 text-decoration: none; 
color: #9ee; 


Th collspac ne coltpsd ne "on Tien= 





代码 中 的 cellspacing-"2" 定 义 表格 中 各 个 单 
元 格 之 间 的 间距 为 2cellpadding="0" 定 义 单 
元 格 的 内 间距 。align="center" 定 义 表格 水 平 
对 齐 方式 为 居中 。 


STEP|08 将 光标 放置 在 第 1 行 第 1 列 单元 格 
<td></td> 标 签 之 间 , 分 别 插入 两 个 <img> 标 签 并 设 
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网 
网 


像 的 高 和 宽 。 


text-decoration: none; 
color: #960; 














</style> 
</head> 








STEP|09 在 第 1 行 第 2 列 单元 格 <td> 标 签 中 添 力 
width 属性 及 值 , 在 <td></td> 标 签 之 间 插 入 <input> 
和 <button> 标 签 并 在 标签 中 添加 属性 及 值 。 














STEP|10 输入 文本 并 为 每 个 文本 的 前 后 插入 超 链 
接 代码 <a hre 伍 "#"></a>。 


</style> 
a </head> 











STEP|11 将 光标 放置 在 第 2 行 第 1 列 单元 格 <td> 
标签 中 ， 添 加 colspan 属性 及 值 ， 并 删除 第 2 行 第 
2 列 <td></td> 标 签 ， 以 及 合并 第 3 行 单元 格 。 
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</style> Ey 
</head> 


<body> 
table width="g43" cellspacing="2" c 
"center"> 
tr 
td>c<img src="images/logo.jpi 
<ing src="images/tel.jpg” widt! 











width="248" heigh 





鲜花 

















STEP|12 然后 ， 在 <td></td> 标 签 之 间 ， 通过 插入 STEP|15 在 第 1 行 第 1 列 单元 格 <td> 标 签 中 ， 添 
加 width . height 和 background 的 属性 及 相应 的 值 ， 
并 通过 插入 <ul> 和 <li> 标 签 创建 一 个 无 序列 表 。 


<table>、<tr> 和 <td> 标 签 创建 一 个 1 行 x10 列 的 
表格 。 





trong TN <7SETOE573 href 
名 花 </a><a hrer="#"> 生 日 礼物 </a> <a href 


cas ca Prof=myns A| 


结婚 礼物 </a></td 














56 <tdwidth="260" hei 


="206" background="images/ 名 人 
jpg"><br /> 
cbr /> 
wb 
<Li><a href= 四 [> 父亲 节 礼 机 大 </a></1i> 













"> 妈 亲 节 迄 合 运 什么 礼物 </a></1i> 
人 <1a><11T> 

节 鲜 花 <ja></Ui> 

送 女 领导 礼物 </a><1i> 

送 上 司 什么 礼物 </a></Li> 

9 > 给 领导 送 什 么 礼 </ar</Li> 











STEP|13 在 每 个 单元 格 中 插入 <img> 标 签 ， 并 设 ” STEP|16 使 用 同样 的 方法 ， 在 第 1 行 第 2 列 单元 
格 通过 插入 <ol> 和 <li> 标 签 创建 一 个 有 序列 表 。 


置 图 像 的 高 、 宽 和 边框 以 及 超 链接 代码 。 


td<ing src="tmages/3.jpg" width 
td><ing src="images/4.jpg" wii " height="25"/> 
td><ing src-"images/5.jpg" width="75" height="25"/> 
td><ing src="images/6.jpg" widt! 

td><ing src="images/7.j 


td>cing src="images/8.j 





td> <ine 





明 : </h4> 


页 面 美观 。</Ui> 


<Li> 请 将 涟 接 放 在 贵 站 相关 页 面 内 。</1Li> 
7 <Li> 首页 要 求 ，PR 值 大 于 等 于 5， 独 立 ITP 大 于 等 于 2 万 。</11 


<L1> 六 和 要求 ，PR 值 大 于 等 于 4， 独 立 IF 大 于 等 于 1 万 。</11 
<11> 在 他 合作 形式 请 志 邮 件 : 123456G6163-com。</11> 





</oL > 
a2 tr 

















STEP|14 使 用 同样 的 方法 ,合并 第 3 行 单元 格 . 
在 合并 后 的 单元 格 中 插入 标签 创建 一 个 2 行 x2 列 
的 表格 。 





STEP|17 将 光标 放置 在 第 4 行 第 1 列 单元 格 <td> 
标签 中 ， 添加 该 单元 格 height 、colspan 和 


background 属性 及 值 . 


并 删除 第 4 行 第 2 列 单元 格 。 
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网 与 网 





(CC 2015 中 文 版 ) 从 背 





1 tr rr ot 


Li> 首页 要 求 ，pR 值 大 : 独立 TP 大 于 等 于 2 万 - </1 插入 超 链接 代码 <a href="#"></a> 
1i> 内 页 要 求 ，PR 信 大 于 等 于 4, 独立 TP 大 于 等 于 7。</1i 








作 形 式 请 发 邮件 : 123456@163.come </Li> 


mages/bg.jpgr 





> 让 且 旅 游 网 </a> etree 
yy spj nbspénbsp énbspjénb: 





anbspi&nbsp3anbsp3&nbspi&nh 
ibspi&nbspi&nbsp; 





&nbspi&nb: 












STEP|18 然后 ， 在 <td><htd> 标 签 之 间 ， 插 入 一 个 
有 序列 表 . 输入 友情 链接 文本 并 为 每 个 文本 的 前 后 


日 天 衣 练 习 : 制作 全 景 图 像 欣 赏 页 面 


在 Dreamweaver 软件 中 ， 使 用 <marquee> 标 签 可 以 实现 元 素 
(图 像 和 文字 等 ) 在 网 页 中 移动 的 效果 , 以 达到 动感 十 足 的 视觉 效 
果 。 通 过 添加 <marquee> 标 签 ， 并 设置 其 属性 可 以 实现 移动 效果 。 
本 练习 通过 使 用 <marquee> 标 签 制作 一 个 360” 风 景 欣赏 页 面 。 








到 











练习 要 点 


<marquee> 标 签 的 应 
用 

<marquee> 标 签 的 系 
列 属 性 

<div></div> 标签 布 
局 







江南 水 乡 古镇 自助 游 攻略 -全 新 的 感觉 你 体验 了 ug7 














操作 步骤 “22》 
STEP|01 设置 页 面 属 性 。 启 动 Dreamweaver. 在 eam 
欢迎 界面 中 选择 HTML 选项 , 创建 一 个 空白 页 面 。 二 天 册 从 的 文件 
STEP102 然后 ,在 页 面 下 方 的 【属性 】 面 板 中 . 
单 击 【 页 面 属性 】 按 钮 。 

STEP|03 在 弹出 的 【页 面 属性 】 对 话 框 中 的 【外 
观 (CSS)】? 选 项 卡 中 ,设置 页 面 大 小 、 文 本 颜色 
和 背景 颜色 。 























:3 网 页 制作 与 网 站 组 奸 CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 





格式 FF) 无 
m0) 无 























文本 颜色 (I) 
并 景 状 色 () 
青果 图像 G 








第 13 章 XHTML 标记 语言 





STEP|07 将 光标 放置 在 <div> 标 签 后 ， 插 入 








<div></div> 标 签 ， 在 页 面 中 创建 第 2 个 层 。 

于 eredecoration noney G 

= 

3< 

35 

36 

3 <divWing src="images/LOGD.JP6" width="784" height="293"</div 
加 3 

39 <Jbody> 

40 </htmb> 

1 








重 夏 四 并 








有 这 中 
下 边 距 人 ) 


在 过 中 四 :| | 
上 边 距 到 ) 





























[RY | 取 滑 














STEP|04 打开 【链接 (CSS)】 选 项 卡 . 设置 链接 
字体 的 大 小 和 各 种 链接 颜色 。 


饼 扩 (css) 
钳 接 字体 (I): [ 回 ( 同 页 面 字体 ) v 


| 才 助 (6) | 确定 ]| 








STEP|05 切换 至 【代码 】 视 图 .将 光标 放置 在 
<body></body> 之 间 , 然后 , 插入 <div></div> 标 签 ， 
在 页 面 中 创建 一 个 层 。 


各 } 
30 a:active { 
text-decoration: none; 


35 
36 bo 
div> /dv 


36 <Jbody> 
30 </htnl> 











STEP|06 在 <div></div> 标 签 之 间 插 入 <img> 标 签 
并 设置 图 像 的 高 和 宽 。 


31 text-decoration: none; 








22 1 
33 </style> 
34 </head> 








和 
325 </html> 








STEP|08 在 <div></div> 标 签 之 间 ， 插入 <img> 图 
像 标 签 并 设置 图 像 的 边框 、 高 和 宽 , 并 为 各 个 图 像 
插入 超 链 接 代 码 。 








<div><a href="#"><ing src="inages/1.jpg" w 
"38" borcer="e" /></a>&nbsp3anb， 
images/2.ipe" wid 
jca hrel 
height="30" border 
mimages/4-jpg" wid 
anbspjanbspjca hre 
height="39" border: 


0" height= 












="# "> img src= 
="@n ></a> 
mages/5.jpg" width="ao" 
en/y</a>&nbspj&nbspi<a href="#">cimg src= 

6" heiight="39"” border="6"/></a> | 






mages/8.jpg" width="ae" 

0"/></a>8nbsp3tnbspj<a href="#"> 
8 6"” border="6"/></a> 

maces19 inon width=nppn 





height-"36”border 
"images/ " wio 
Enhen:anhens ea href=nany<ima err 


<img src= 











STEP|09 同时 .在 <div> 标 签 中 ， 为 该 标签 定义 
style 属性 。 


36 <body> 


37 <div> <img src="inages/LOGO.JP6" width="784" height="293"</div 






ges/2.jpg" width-"8e" height-"30" border="on/ 

href="#"><ing src="images/3.jpg" width= 
></a>lmbspja&abspj<a href-"h"><ing 
"ee" heigh’ 
nbsp’ f="#"> ing Src="images/5.jpg" width="80" 
he pert border="o"/» </a>8nbspytnbsps<a href-nen> «img orc- 
“inages/6.jpe" width 6 border="@"/></a> 
anhsnzanhsnzca href=ran 








"a0" border=" 








STEP|10 将 光标 放置 在 第 2 个 </div> 标 签 后 ， 插 
入 <div></div> 标 签 ， 在 页 面 中 创建 第 3 个 层 。 






<a href="#">cing Ss 

”border="gn/></ay&nbspj&nbspj<a href="#"><1mg src= 

"inages/7.jpg" width-"ae" height="36" border="e"/></a> 

gnbsp;&nbsp; <a href="#"><ing src="images/9.jpg" width="86" 
border="0"/></a></div> 








STEP|11 在 该 层 中 输入 文本 ， 并 为 每 个 文本 插入 
超 链接 代码 。 
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STEP|12 使 用 相同 的 方法 ， 在 页 面 中 创建 第 4 个 
层 。 并 在 <div></div> 标 签 中 创建 一 个 1 行 x2 列 的 








diw 
</a>> <a href-M" 国 内 ~p( mm 入] 
iv 


<155977 
</html> 四 





STEP|13 然后 ， 在 第 1 行 第 1 列 单元 格 中 插入 
<img> 标 签 及 设置 该 标签 的 属性 ， 为 该 单元 格 插入 
图 像 。 





a 
41 
机 

4 










STEP|14 在 第 1 行 第 2 列 单元 格 中 插入 <marquee> 
</marquee> 标 签 ， 定义 图 像 滚动 的 样式 。 




















STEP|15 将 光标 放置 在 第 4 个 </div> 标 签 后 ， 插 
入 <div></div> 标 签 , 在 页 面 中 创建 第 5 个 层 , 并 输 
入 版 权 文本 。 


"alternate" scrollanol 









<ime src: 
</marquee> 


Copyright @ 2695-2689 ww.Internationaltravel.con.cn ALL 
rights reserved。 宰 科 之 多 公司 版 权 所 有 。 京 ICP 备 981234567 引 </div; 


四 anbspj&nbspj&anbspj&nbspj&nbspj&nbspj&nbspj&nbspj&nbspi 





</html> vv 





国 3.6 新 手 训练 营 





练习 1: 使 用 XHTML 制作 赃 套 列表 
人 急 downloads\13\ 新 手 训练 营 \ 底 套 列表 

提示 : 本 练习 中 , 将 使 用 XHTML 来 制作 一 个 项 
目 列表 和 编号 列表 肉 套 在 一 起 的 赃 套 列表 . 其 编号 列 
表 嵌 套 在 项 目 列表 中 。 

首先 ,创建 一 个 空白 文档 ,并 切换 到 【代码 】 视 
图 中 。 将 光标 放置 在 <body></body> 标 签 之 间 ， 输 入 
<ul></ul> 标 签 .创建 一 个 项 目 列表 。 











<1doctype htnl> A 
<html> 
<head> 

2 <meta charset: 
<title> 无 标题 
</head> 





urf-an> 
</title> 














然后 . 在 <ul></ul> 标 签 之 间 输 入 文本 “一. 学历”. 
并 在 文本 后 面 输入 <ol></ol> 标 签 。 


;; 第 13 章 XHTML 标记 语言 











了 doctype html> A 
ml> 


3 <head> 
<meta charset="utf-8"> 
<title> 无 标题 文 析 </title> 
6 «</head> 


冯 
5 
7 
， 

| uC 
/boyS 
1 






















































/hint> 
| 图 5 | </body> 
| 到 ”syhamt i 
在 <ol></o> 标 签 之 间 输 入 文本 “1. 博 士 ~. 使 用 最 后 输入 <tbody></tbody>、<tr></t>、<td></td> 
同样 的 方法 ,输入 其 他 <ol></ol> 标 签 和 文本 。 <th></th> 标 签 ， 来 定义 表格 和 表格 列 组 标题 。 
rp TREE z 本 醋 ee 
2 <html> 
ens 目 
5 <title? 无 标 站 文档 c/titley 二 
6 cyhead> 上 
国 。 国 六 i 
9 [ct 一 、 lo 2 和 汪 轩 
rt St 
”此 , _ < [i 
[ 28 to>énbsp; < /td 民 
让 国有 
述 方 ; 个 Fb 31 gy 导 让 图 
使 用 上 述 方法 ， 制作 第 2 个 谍 套 列表 ,并 切换 到 :OA ,上 
【设计 】 视 图 中 ， 查 看 最 终 效果 。 a wm Ps 









练习 3: 使 用 XHTML 制作 选择 列表 


全 downloads\13\ 新 手 训练 营 \ 选 择 列表 
提示 : 本 练习 中 , 将 使 用 XHTML 代码 来 制作 一 

个 具有 下 拉 功 能 的 选择 列表 。 
首先 创建 一 个 空白 文档 ， 并 切换 到 【代码 】 视 图 
中 。 将 光标 放置 在 <body></body> 标 签 之 间 ， 输 入 
<form></form> 标 签 ,并 输入 用 于 定义 表单 属性 的 id、 


练习 2: 使 用 XHTML 制作 特定 表格 meme 和 method 属性 。 


8 <body> 
3 2 LOA), 
ee > 






gag 和 
<ol>1 .三 年 以 下 cjol> 
<aU2. 三 年 c/ot> 






<ol>3. 五 年 </ol> 
4aU4 十 年 </oty 
<ol>5. 十 年 以 上 </ol></ul 



























全 downloads\13\ 新 手 训练 营 特 定 表 格 3 
提示 ; 本 练习 中 ,将 使 用 XHTML 代码 制作 一 个 。 ;te 贰 二 RE 入 天 ] 


6 </head> 


3 行 x4 列 、 宽 度 为 200 像素 、 边 框 粗细 为 1、 单 元 格 
边 距 和 间距 为 2， 以 及 表格 标题 位 于 顶部 的 一 个 特定 
表格 。 

首先 创建 一 个 空白 文档 ， 并 切换 到 【代码 】 视 图 
中 。 将 光标 放置 在 <body></body> 标 签 之 间 ， 输入 定 
义 表格 基本 属性 的 标签 。 








然后 ， 在 <form></form> 标签 中 .输入 
<label></label> 标 签 ， 定 义 选择 列表 的 名 称 。 











5 title> 无 标题 文档 </ 





"post" 


是 
< > 














然后 ， 输 入 <caption></caption> 标 签 ， 并 在 标签 
之 间 输 入 表格 标题 “特定 表格 ”。 
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网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 于 


高 手 
最 后 ， 在 <label></label> 标 签 下 方 ， 继续 输入 


<select></select> 标 签 ， 定 义 选择 列表 名 称 和 ID， 
时 在 <option></option> 标 签 中 输入 列表 选项 。 


FLA] 





可 








B <body> 


10 





ES 


1 
2 
13 
Iu 
15 
Ew 
|1 
i@ </hodv> 





练习 4: 使 用 XHTML 制作 日 期 选择 器 
售 downloads\13\ 新 手 训 练 营 \ 日 期 选择 器 

提示 : 本 练习 中 ,将 使 用 XHTML 代码 来 制作 一 
个 日 期 选择 器 。 

首先 ,创建 一 个 空白 文档 ， 并 切换 到 【代码 】 视 
图 中 。 将 光标 放置 在 <body></body> 标 签 之 间 ， 输入 
<form></form> 标 签 ， 并 输入 用 于 定义 表单 属性 的 id、 
name 和 method 属性 。 








2 <html> =- 
hod 

4 meta charsetaut cape 

， 和 
i 








/html> 
然后 ， 在 <form></form> 标签 中 ， 输 入 
<label></label> 标 签 ， 定 义 日 期 选择 器 的 名 称 。 





网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 











neta charsetz， 
5 ”<title> 无 标 : 
5 </head> 





"post" 











在 <label></label> 标 签 下 方 . 继续 输入 <input 
type="date” name="date”id="date"> ， 定 义 日 期 选 
择 器 。 


.Me 
ET We 


"date 二 











最 后 执行 【文件 】|【 保 存 】 命 令 ， 保 存 网 页 文 
同时 














档 。 同 时 ， 按 F12 键 ， 在 网 页 中 预览 日 期 选择 器 。 
3 71 六 本 要 让 I 内 部 二 | 痢 | 一 | 口 | 六 
© CO 5 fle/ rr |v 图 . 司 itI3Q 
wom - DoW > gar , TR -| Hm - nt » Ys 
号 无 国文 精 . [= 
日 期 选择 器 
| = 本 
20154058 ~ J 


周 - 专责 = 周 由 网 5 周 六 周 | 


Wk 
Ea 
1 全 位 5 1 7 


20210 22 2 24 
5 2 2 2 2 20 31| 
nn 中 Wi 要 VT 驹 书后 口 d) Q 100% 








第 14 章 


设计 网 页 元 素 样式 


在 网 页 设计 过 程 中 ， 可 通过 设计 网 页 元 素 的 样式 ， 来 增加 网 页 的 美观 性 。 在 设计 网 页 元 素 样式 时 ， 
就 需要 使 用 Dreamweaver 中 内 置 的 可 视 化 的 CSS 技术 了 。CSS 技术 为 网 页 提供 了 一 种 新 的 设计 方式 ， 
通过 简洁 、 标 准 化 和 规范 性 的 代码 ,不仅 可 以 统一 地 控制 HTML 中 各 标签 的 显示 属性 .而且 还 可 以 更 
有 效 地 控制 网 页 外 观 。 本 章 将 详细 介绍 CSS 样式 的 基本 语法 、 使 用 范围 ， 以 及 使 用 CSS 样式 表 美 化 网 
页 页 面 和 布局 等 内 容 的 基础 知识 和 实用 技巧 。 
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网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 


:网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 





CSS 样式 概述 








CSS 样式 表 是 设计 网 页 的 一 种 重要 工具 . 是 
Web 标准 化 体系 中 最 重要 的 组 成 部 分 之 一 。 因 此 . 
只 有 了 解 CSS 样式 表 ， 才 能 制作 出 符合 Web 标准 
化 的 网 页 。 


14.1.1 








了 解 CSS 样式 


CSS 样式 在 网 页 设计 中 .已 经 成 为 主导 技术 。 
许多 网 站 开发 中 ， 都 离 不 开 CSS 样式 的 应 用 。 
1. 关于 层叠 样式 表 

层 合 样式 表 (CSS) 是 一 组 格式 设置 规则 , 用 
于 控制 网 页 内 容 的 外 观 。 

通过 使 用 CSS 样式 设置 页 面 的 格式 ， 可 将 页 
面 的 内 容 与 表示 形式 分 离开 。 页 面 内 容 ( 即 HTML 
代码 ) 存放 在 HTML 文件 中 ， 而 用 于 定义 代码 表 
示 形式 的 CSS 规则 存放 在 另 一 个 文件 (外 部 样式 
表 ) 或 HTML 文档 的 另 一 部 分 (通常 为 文件 头 部 
分 ) 中 。 

将 内 容 与 表示 形式 分 离 可 使 得 从 一 个 位 置 集 
中 维护 站 点 的 外 观 变 得 更 加 容易 , 因为 进行 更 改 时 
无 需 对 每 个 页 面 上 的 每 个 属性 都 进行 更 新 。 

将 内 容 与 表示 形式 分 离 还 会 可 以 得 到 更 加 简 
练 的 HTML 代码 ， 这样 将 缩短 浏览 器 加 载 时 间 
并 为 存在 访问 障碍 的 人 员 简化 导航 过 程 。 

使 用 CSS 可 以 非常 灵活 并 更 好 地 控制 页 面 的 
确切 外 观 。 使 用 CSS 可 以 控制 许多 文本 属性 . 包 
括 特定 字体 和 字 大 小 , 粗 体 、 斜 体 、 下 划 线 和 文本 
阴影 , 文本 颜色 和 背景 颜色 , 链接 颜色 和 链接 下 划 
线 等 。 通 过 使 用 CSS 控制 字体 . 还 可 以 确保 在 多 
个 浏览 器 中 以 更 一 致 的 方式 处 理 页 面 布 局 和 外 观 。 

除 设置 文本 格式 外 ,还 可 以 使 用 CSS 控制 网 
页 面 中 块 级 别 元 素 的 格式 和 定位 。 块 级 元 素 是 一 段 
独立 的 内 容 ， 在 HTML 中 通常 由 一 个 新 行 分 隔 . 
并 在 视觉 上 设置 为 块 的 格式 。 例 如 .<hl> 标 签 、 
<p> 标 答 和 <div> 标 签 都 在 网 页 上 产生 块 级 元 素 。 
































2. 关于 CSS 规则 

CSS 格式 设置 规则 由 两 部 分 组 成 :选择 器 和 声 
明 。 其中. 选择 器 主要 用 于 标识 已 设置 格式 元 素 的 
术语 (如 p、hl1、 类 名 称 或 ID 等 名 称 ) 。 

而 声明 又 称 为 “声明 块 用 于 定义 样式 属性 。 
例如 ,在 下 面 的 CSS 代码 中 ,hl 是 选择 器 ， 介 于 
“大 括号 ”({) 之 间 的 所 有 内 容 都 是 声明 块 : 








hl { font-size: 16 pixels; font- 
family: Helvetica; font-weight:bold; } 


在 声明 块 中 , 又 包含 属性 (如 font-family) 和 
值 (如 Helvetica) 两 部 分 。 

在 前 面 的 CSS 规则 中 ,已 经 为 <hl> 标 签 创建 
了 特定 样式 :所 有 链接 到 此 样式 的 <h1> 标 签 的 文本 
的 【字号 】 为 16 像素 .【 字 体 】 为 Helvetica、【 字 
形 】 为 【 粗 体 】。 

样式 (由 一 个 规则 或 一 组 规则 决定 ) 存放 在 与 
要 设置 格式 的 实际 文本 分 离 的 位 置 。 因 此, 可 以 将 
<h1> 标 签 的 某 个 规则 一 次 应 用 于 许多 标签 .通过 这 
种 方式 , CSS 可 提供 非常 便利 的 更 新 功能 。 若 在 一 
个 位 置 更 新 CSS 规则 ， 使 用 已 定义 样式 的 所 有 元 

















素 的 格式 设置 将 自动 更 新 为 新 样式 。 
地 点 安排 
Ht ‘{ . 活动 安排 
font-family: Arial; sme 
font:slze: 16px; 
font-weight: bold; 
春节 





用 户 可 以 在 Dreamweaver 中 定义 以 下 样式 
类 型 。 
口 类 样式 ”可 以 让 样式 属性 应 用 于 页 面 上 
的 任何 元 素 。 
口 HTML 标签 样式 ”重新 定义 特定 标签 的 
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格式 。 如 创建 或 更 改 <hl> 标 签 的 CSS 样 <body> 
式 时 ， 则 应 用 于 所 有 <hl> 标 答 。 /bogy> 
口 高 级 样式 ”重新 定义 特定 元 素 组 合 的 格 SA 
式 ， 或 其 他 CSS 允许 的 选择 器 表单 的 格 在 外 部 CSS 文件 中 ,通常 需要 在 文件 的 头 部 
式 。 高 级 样式 还 可 以 重 定义 包含 特定 这 ”创建 CSS 的 文档 声明 ， 以 定义 CSS 文档 的 一 些 基 
属性 的 标签 的 格式 。 本 属性 。 常用 的 文档 声明 包括 6 种 . 其 具体 情况 如 
14.1.2 CSS 样式 分 类 Ws 


声明 类 型 ， 作 
根据 CSS 样式 表 存放 的 位 置 以 及 其 应 用 的 范 
围 ， 可 以 将 CSS 样式 表 分 为 三 种 ， 即 外 部 CSS、 @import 
内 部 CSS 以 及 内 联 CSS 等 。 
1. 外 部 CSS 
外 部 CSS 是 一 种 独立 的 CSS 样式 ,其 一 般 将 CSS 
代码 存放 在 一 个 独立 的 文本 文件 中 , 扩展 名 为 “css 。 
这 种 外 部 的 CSS 文件 与 网 页 文档 并 没有 什么 @font-face 
直接 的 关系 。 如 果 需 要 通过 这 些 文件 控制 网 页 文 
档 ， 则 需要 在 网 页 文档 中 使 用 link 标签 导入 。 
例如 ,使 用 CSS 文档 来 定义 一 个 网 页 的 大 小 


@charset 











在 多 数 CSS 文档 中 ， 都 会 使 用 @charset 声明 
文档 所 使 用 的 字符 集 。 除 @charset 声明 以 外 , 其 他 

















和 边 距 ， 代 码 如 下 。 
的 声明 多 数 可 使 用 CSS 样式 来 蔡 代 。 
@charset "gb2312"; 2. 内 部 CSS 
名 a 2 内 部 CSS 与 内 联 CSS 类 似 . 都 是 将 CSS 代码 


ee 放 在 文档 中 。 但 是 内 部 样式 并 不 放 在 其 设置 的 标签 











agi 中 ， 而 是 放 在 统一 的 <style></style> 标 签 中 。 
padding:0px; 这 样 做 的 好 处 是 将 整个 页 面 中 所 有 的 CSS 样 
font-size:12px 式 集中 管理 ， 以 选择 器 为 接口 供 网 页 浏览 器 调用 。 
} 例如 ， 使 用 内 部 CSS 定义 网 页 的 宽度 以 及 超 
将 CSS 代码 保存 为 文件 后 ， 即 可 通过 link 标 ”链接 的 下 划 线 等 ， 代 码 如 下 ; 

签 将 其 导入 到 网 页 文档 中 。 例如 . CSS 代码 的 文件 <!doctype html> 

名 为 main.css， 代 码 如 下 。 <html> 

<head> 

le D> <meta charset="utf-8"> 
<html> <title> 测 试 网 页 文档 </title> 
<head> <!-- 开 始 定义 CSS 文档 --> 


<meta charset="utf-8"> 
<tit1le> 导 入 CSS 文档 </title> 

<link href="main.css" rel="stylesheet" 
type="text/css" /> 

<1-- 导 入 名 为 main-css 的 CSS 文档 --> 
</head> 


<style type="text/css"> 
I= 

body { 

width:1003px; 

1 


af 
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text-decoration:none; 


> 
</style> 

<!-- 内 部 CSS 完成 --> 
</head> 


虽然 , HTML 允许 用 户 将 <style> 标 签 放 在 网 
页 的 任意 位 置 , 但 在 浏览 器 打开 网 页 的 过 程 


中 ， 通 常会 以 从 上 到 下 的 顺序 解析 代码 。 因 
此 ,将 <style> 标 签 放置 在 网 页 的 头 部 , 可 提前 
下 载 和 解析 CSS 代码 , 提高 样式 显示 的 效率 。 





3. 内 联 CSS 

内 联 CSS 是 利用 标签 的 style 属性 设置 的 CSS 
样式 ,又 称 说 入 式样 式 。 内 联 式 CSS 与 HTML 中 
的 标签 描述 一 样 ， 只 能 定义 某 一 个 网 页 元 素 的 样 
式 , 是 一 种 过 渡 型 的 CSS 使 用 方法 ,在 HTML 中 
并 不 推荐 使 用 。 内 部 样式 不 需要 使 用 选择 器 , 如 使 
用 内 联 式 CSS 设置 一 个 表格 的 宽度 。 


<table style="width:100px;"> 
<tr> 

<td> 宽 度 为 100px 的 表格 </td> 
</tr> 

</table> 


14.1.3 ”CSS 书写 规范 


作为 一 种 网 页 的 标准 化 语言 ,CSS 有 着 严格 的 
书写 规范 和 格式 。 
1. CSS 代码 规范 
户 在 书写 CSS 代码 时 . 需要 注意 以 下 几 点 。 

口 单位 符号 

在 CSS 中 ， 如果 属性 值 是 一 个 数字 ， 用 户 必 
须 为 这 个 数字 匹配 具体 的 单位 . 除非 该 数字 是 由 百 
分 比 组 成 的 比例 或 者 数字 为 0。 

例如 , 分 别 定义 两 个 层 . 其 中 第 1 个 层 为 父 容 
器 . 以 数字 属性 值 为 宽度 : 第 2 个 层 为 子 容器 . 以 
百分比 为 宽度 。 
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#parentContainer{ 
Width:1003px 
} 


#childrenContainert{ 
Width:50% 
. 


口 使 用 引号 

多 数 CSS 的 属性 值 都 是 数字 值 或 预先 定义 好 
的 关键 字 。 然 而 . 有 一 些 属性 值 则 是 含有 特殊 意义 
的 字符 串 。 这 时 . 引用 这 样 的 属性 值 就 需要 为 其 添 
加 引号 。 

典型 的 字符 串 属 性 值 就 是 各 种 字体 的 名 称 。 





Span{ 
font-family:" 微 软 雅 黑 " 


口 多 重 属性 

如 果 在 这 条 CSS 代码 中 ， 有 多 个 属性 并 存 ， 
则 每 个 属性 之 间 需 要 以 “分 号 ”(;) 隔 开 。 

.content{ 

color:#999999; 

font-family:" 新 宋体 "; 

font-size:14px; 


} 


口 大 小 写 敏感 空格 

CSS 与 VBScript 不 同 ， 对 大 小 写 非 常 敏感 。 
在 CSS 中, mainText 和 MainText 是 两 个 完全 不 同 
的 选择 器 。 

除了 一 些 字符 串 式 的 属性 值 (如 英文 字体 MS 
Serf 等 ) 以 外 .CSS 中 的 属性 和 属性 值 必须 小 写 。 

为 了 便于 判读 和 纠 错 ， 在 编写 CSS 代码 时 ， 
每 个 属性 值 之 间 添 加 一 个 空格 。 这样, 如 某 条 CSS 
属性 有 多 个 属性 值 , 则 阅读 代码 的 用 户 可 方便 地 将 
其 分 开 。 
2. 添加 注释 

与 多 数 编程 语言 类 似 ， 用 户 也 可 以 对 CSS 代 
码 进行 注释 。 但 与 同样 用 于 网 页 的 HIML 语言 注 
释 方 式 有 所 区 别 。 

在 CSS 中 . 注释 以 “和 斜 杠 ”(/) 和 “ 星 号 ”(*) 











开头 ， 以 “ 星 号 ”(*) 和 和 斜 本”(/) 结尾 。 


.text{ 

font-family: "微软 黑体 "; 
font-size:12px; 
/*color:#ffcc00;*/ 

} 


其 注释 不 仅 可 用 于 单行 也 





在 CSS 代码 中 ， 
可 用 于 多 行 。 
3. 文档 的 声明 
在 外 部 CSS 文件 中 ， 通 常 需要 在 文件 的 头 部 
创建 CSS 的 文档 声明 ， 以 定义 CSS 文档 的 一 些 基 
本 属性 。 常用 的 文档 声明 包括 6 种 类 型 , 其 具体 作 


14.2 
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导入 外 部 的 CSS 文件 
定义 当前 CSS 文件 的 字符 集 
定义 说 入 HTML 文档 的 字体 
定义 嵌入 的 字体 定义 文件 
定义 页 面 的 版 式 
定义 设备 类 型 





























在 多 数 CSS 文档 中 ,都 会 使 用 “@charset” 声 
明文 档 所 使 用 的 字符 集 。 除 了 “(@charset” 声 明 以 
外 ， 其 他 的 声明 多 数 可 以 使 用 CSS 样式 来 替代 。 





使 用 【CSS 设计 器 】 面 板 





Dreamweaver 中 的 CSS 样式 被 集成 到 一 个 独 
特 的 【CSS 设计 器 】 面 板 中 ,包括 源 、@ 媒 体 、 选 
择 器 和 属性 4 个 窗 格 。【CSS 设计 器 】 面 板 类 似 于 
【插入 】 面 板 ， 可 支持 用 户 对 CSS 样式 进行 可 视 化 
的 操作 。 


14.2.1 源 


在 【CSS 设计 器 】 面 板 的 最 上 部 分 为 【 源 】 窗 
格 , 在 该 窗 格 中 主要 列 出 了 与 文档 相关 的 所 有 CSS 
样式 表 , 以 协助 用 户 设置 网 页 所 使 用 的 CSS 样式 。 
1. 创建 新 的 CSS 文件 

创建 新 的 CSS 文件 是 在 网 页 中 创建 一 个 新 的 
CSS 文件 并 将 其 附加 到 文档 。 在 【CSS 设计 器 】 面 
板 的 【 源 】 窗 格 中 ， 单 击 右上 角 的 【添加 CSS 源 】 
按钮 ， 在 其 列表 中 选择 【创建 新 的 CSS 文件 】 选 项 。 












































然后 .在 弹出 的 【创建 新 的 CSS 文件 】 对 话 
框 中 . 单 击 【 浏 览 】 按 钮 。 


创建 新 的 CSS 文件 








测 为 : 口 抽 六 四 


OSXO 
* 有 条 件 使 用 (可 选 ) 


CC 到 


























在 弹出 的 【将 样式 表 文 件 另 存 为 】 对 话 框 中 ， 
设置 保存 位 置 和 名 称 ， 单 击 【保存 】 按 钮 即 可 。 








E] 竺 样式 雪 文 件 另存 为 本 
了 文 件 生 自 出 文件 系统 a | 
2 4 网 站 
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此 时 ， 系 统 会 自动 返回 到 【创建 新 的 CSS 文 
件 】 对 话 框 中 ， 选 中 【和 链接】 选项 ， 单 击 【 确 定 】 
按钮 即 可 创建 并 链接 外 部 CSS 样式 表 文 件 。 
【创建 新 的 CSS 文件 】 对 话 框 中 .主要 包括 下 
列 三 个 选项 。 
口 链接 选中 该 选项 , 可 以 将 CSS 文件 链接 
到 文档 。 
口 导入 选中 该 选项 , 可 以 将 CSS 文件 导入 
到 文档 中 。 
口 有 条 件 使 用 (可 选 ) 该 选项 用 于 指定 要 
与 CSS 文件 关联 的 媒体 查询 。 








诡 件 /URLE: [Feil 二 四 过 中 | 至 CW- 
ww: Ca 

OO 
* 有 条 件 使 用 (可 选 ) 


@ 单 击 





[mm mm | | 


2. 附加 现 有 的 CSS 文件 

附加 现 有 的 CSS 文件 是 将 现 有 的 CSS 文件 附 
加 到 文档 中 。 在 【CSS 设计 器 】 面 板 的 【 源 】 窗 格 
， 单 击 右 上 角 的 【添加 CSS 源 】 按 钮 ， 在 其 列 
表 中 选择 【附加 现 有 的 CSS 文件 】 选 项 。 在 弹出 
的 【使 用 现 有 的 CSS 文件 】 对 话 框 中 . 单 击 【 浏 
览 】 按 钮 。 

















在 弹出 的 【选择 样式 表 文 件 】 对 话 框 中 . 选择 
所 需 使 用 的 CSS 样式 表 文件 .并 单 击 【 确 定 】 
按钮 。 

此 时 ， 系 统 会 自动 返回 到 【创建 新 的 CSS 文 
件 】 对 话 框 中 .选中 【和 链接】 选项， 单 击 【 确 定 】 
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， 有 条 件 使 用 (可 选 ) 





3. 在 页 面 中 定义 

在 【CSS 设计 器 】 面 板 的 【 源 】 窗 格 中 , 单 击 
左上 角 的 【添加 CSS 源 】 按 钮 ， 在 其 列表 中 选择 
【在 页 面 中 定义 】 选 项 ， 系 统 即 可 创建 一 个 内 部 的 
CSS 样式 , 并 在 【 源 】 窗 格 中 添加 一 个 <style> 标 签 。 





[mtx | 
Bm 














在 网 页 中 .切换 到 【代码 】 视 图 中 .用 户 会 发 
现代 码 中 多 出 一 个 放置 内 部 CSS 样式 的 <style> 标 
签 ， 而 所 创建 的 内 部 CSS 样式 则 会 显示 在 <style> 
与 <style> 标 签 之 间 。 








idoctype htmnl> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 


<title> 无 标题 文档 </title> 


<style type= "text/css 
7 /style> 


</head> 































































e JU 了] 十 一 
landscape |w] 
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BED 











med1a screen and (ortentation:landscape){ 
} 





当 用 户 创建 CSS 样式 之 后 , 在 【 源 〗 窗 格 中 
选择 CSS 样式 ， 单 击 右上 角 的 【删除 CSS 
源 〗 按 钮 ， 即 可 删除 该 CSS 样式 。 


14.2.2”@ 媒 体 


用 户 可 以 在 【@ 媒 体 】 窗 格 中 为 相应 的 媒体 类 
型 设置 不 同 的 CSS 样式。 要 设置 @ 媒 体 ， 需 要 先 
在 【 源 】 窗 格 中 选择 一 个 CSS 源 ， 然 后 单 击 【@ 
媒体 】 窗 格 左上 角 的 【添加 媒体 查询 】 按 钮 。 



































然后 ,在 弹出 的 【定义 媒体 查询 】 对 话 框 中 
单 击 【媒体 属性 】 下 拉 按 钮 ， 选择 一 种 媒体 属性 : 
同时 , 单 击 其 右 侧 的 【属性 值 】 下 拉 按 钮 ,设置 媒 
体 属性 值 。 除 此 之 外 . 用 户 还 可 以 通过 单 击 【添加 
条 件 ] 按 钮 来 添加 多 个 媒体 属性 ,或 者 通过 单 击 【 删 
除 条 件 】 按 钮 来 删除 所 添加 的 媒体 属性 。 

设置 完 媒体 条 件 之 后 , 单 击 【确定 】 按 钮 , 即 
可 创建 媒体 类 型 的 CSS 样式 。 











在 【@ 媒 体 】 窗 格 中 ， 目 前 对 多 个 条 件 只 支 


持 AND 运算 。 











CC 到 ] 广 荐 -] 


其 中 ，Dreamweaver 为 用 户 提供 了 23 种 媒体 
属性 ， 其 具体 情况 如 下 所 述 。 
口 media 用 于 设置 提交 网 页 文档 的 媒体 类 


型 ,可 通过 属性 值 来 设置 属性 媒介 。 其 中 ， 
screen 属性 值 表 示 计 算 机 显示 器 ，print 属 
性 值 表示 打印 机 ，handheld 属性 值 表示 小 
型 手持 设备 , aural 属性 值 表示 语音 和 音频 
合成 器 ，braille 属性 值 表示 盲人 用 电子 法 
触摸 设备 , projection 属性 值 表 示 幻 灯 片 式 
的 方案 展示 ,tty 属性 值 表示 固定 密度 字母 栅 
格 的 设备 ,tV 属 性 值 表示 电视 机 类 型 的 设备 。 


口 orientation 用 于 设置 目标 显示 器 或 纸张 


方向 。 


口 min-width 用 于 设置 目标 显示 区 域 的 最 


小 宽度 ， 可 直接 在 文本 框 中 输入 宽度 值 ， 
并 在 其 后 的 下 拉 列 表 中 选择 宽度 单位 。 


口 max-width 用 于 设置 目标 显示 区 域 的 最 


大 宽度 ， 可 直接 在 文本 框 中 输入 宽度 值 ， 
并 在 其 后 的 下 拉 列 表 中 选择 宽度 单位 。 


口 width 用 于 设置 目标 显示 区 域 的 宽度 ， 


可 直接 在 文本 框 中 输入 宽度 值 ， 并 在 其 后 
的 下 拉 列 表 中 选择 宽度 单位 。 


口 min-height 用 于 设置 目标 显示 区 域 的 最 


小 高 度 ， 可 直接 在 文本 框 中 输入 高 度 值 ， 
并 在 其 后 的 下 拉 列 表 中 选择 高 度 单位 。 


口 max-height 用 于 设置 目标 显示 区 域 的 最 


大 高 度 ， 可 直接 在 文本 框 中 输入 高 度 值 ， 
并 在 其 后 的 下 拉 列 表 中 选择 高 度 单位 。 


口 height 用 于 设置 目标 显示 区 域 的 高 度 ， 
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可 直接 在 文本 框 中 输入 高 度 值 ， 并 在 其 后 
的 下 拉 列 表 中 选择 高 度 单位 。 

口 min-resolution 用 于 设置 媒体 的 最 小 像 
素 密度 ， 可 直接 在 文本 框 中 输入 像素 值 ， 
其 单位 包括 dpi、dpcm 和 dppx。 

口 max-resolution 用 于 设置 媒体 的 最 大 像 
素 密度 ， 可 直接 在 文本 框 中 输入 像素 值 ， 
其 单位 包括 dpi、dpcm 和 dppx。 
































nant ea ene itd 另外 . 在 文本 框 中 输入 第 1 个 字母 后 . 系统 会 
直接 在 文本 杠 中 输入 像素 值 ， 其 单位 包括 。 自动 列 出 有 关 第 1 个 字母 的 所 有 选择 器 名 称 , 以 供 
dpi、dpcm 和 dppx。 用 户 进行 选择 。 


口 min-device-aspect-ratio 用 于 设置 媒体 
device-width/ device-height 的 最 小 比率 。 

口 max-device-aspect-ratio 用 于 设置 媒体 
device-width/ device-height 的 最 大 比率 。 

口 device-aspect-ratio 用 于 设置 媒体 
device-width/ device-height 的 比率 。 

口 min-aspect-ratio 用 于 设置 目标 显示 区 
































域 的 最 小 宽度 和 高 度 比 。 
口 max-aspect-ratio 用 于 设置 目标 显示 区 
域 的 最 大 宽度 和 高 度 比 。 
口 aspect-ratio 用 于 设置 目标 显示 区 域 的 
宽度 和 高 度 比 。 
口 min-device-width 用 于 设置 媒体 的 最 小 i 
宽度 。 本 
口 max-device-width 用 于 设置 媒体 的 最 大 除 此 之 外 ， 用 户 在 列表 框 中 选择 选择 器 名 称 ， 
宽度 。 单 击 右 上 角 的 【删除 选择 器 】 按 钮 ， 即 可 删除 所 选 
口 device-width 用 于 设置 媒体 的 宽度 。 选择 器 。 而 对 于 列表 框 中 存在 大 量 选择 器 的 现象 ， 
口 min-device-height 用 于 设置 媒体 的 最 小 则 可 以 通过 在 【筛选 CSS 规则 】 文 本 框 中 输入 选 
高 度 。 择 器 名 称 的 方法 ， 来 搜索 选择 器 。 
口 max-device-height 用 于 设置 媒体 的 最 大 
高 度 。 在 【选择 器 〗 窗 格 中 ， 用 户 可 以 创建 任意 类 
口 device-height 用 于 设置 媒体 的 高 度 。 型 的 选择 器 ， 其 选择 器 的 类 型 将 在 下 面 的 章 
1423 选择 器 节 中 进行 介绍 。 





在 【CSS 设计 器 】 面 板 中 的 【选择 器 ] 窗 格 “14.2.4 ”属性 
中 . 单 击 右上 角 的 【添加 选择 器 】 按 钮 ， 系 统 会 自动 
在 窗 格 中 显示 一 个 文本 框 ， 输 入 选择 器 名 称 即 可 。 








在 【CSS 设计 器 】 面 板 的 【属性 】 窗 格 中 .可 
以 为 指定 的 CSS 样式 设置 属性 。 
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在 【属性 】 窗 格 中 . 主要 包括 下 列 5 种 类 型 的 


属性 。 
口 布局 在 该 选项 卡 中 , 可 以 设置 CSS 样式 
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的 布局 样式 ， 包 括 宽 度 、 高 度 、 最 小 宽度 
等 属性 。 

文本 在 该 选项 卡 中 ,可 以 设置 CSS 样式 
的 文本 格式 ， 包 括 字体 大 小 、 字 体 颜色 、 
字体 变形 等 属性 。 

边框 ”在 该 选项 卡 中 , 可 以 设置 CSS 样式 
的 边框 格式 ， 包 括 所 有 边 、 顶 部 、 右 侧 等 
属性 。 

背景 在 该 选项 卡 中 , 可 以 设置 CSS 样式 
的 背景 格式 ， 包 括 背 景 位 置 、 背 景 大 小 、 
背 录 颜色 等 属性 。 

自 定义 ”在 该 选项 卡 中 ， 可 以 自 定义 除 内 
置 的 布局 、 文 本 、 边 框 和 背景 属性 之 外 的 
CSS 样式 属性 。 





14.3 


虽然 用 户 已 通过 CSS 样式 概述 和 【CSS 设计 
器 】 面 板 等 基础 知识 对 CSS 样式 有 了 进一步 的 了 
解 ， 但 为 了 可 以 更 好 地 设置 CSS 样式 表 ， 还 需要 
继续 了 解 CSS 选择 器 和 CSS 选择 方法 等 基础 知识 。 


14.3.1 CSS 选择 器 


在 网 页 制作 中 .用 户 可 以 通过 CSS 选择 器 . 
来 实现 CSS 对 HIML 页 面 中 的 元 素 一 对 一 、 一 对 
多 或 者 多 对 一 的 控制 。 

CSS 选择 器 的 名 称 只 允许 包含 字母 .数字 以 及 
下 划 线 ,系统 不 允许 将 数字 放 在 选择 器 名 称 的 第 1 
位 ,也 不 允许 选择 器 使 用 与 HTML 标签 重复 的 名 
称 ， 以 免 出 现 混乱 。 

在 CSS 语法 规则 中 .主要 包括 标签 选择 器 、 








器 5 种 选择 器 。 
1. 标签 选择 器 

CSS 提供 了 标签 选择 器 , 并 人 允许 用 户 直接 定义 
多 数 XHMTIL 标签 样式 。 


例如 ,定义 网 页 中 所 有 无 序列 表 的 符号 为 空 , 
可 直接 使 用 项 目 列表 的 标签 选择 器 。 





CSS 选择 器 和 方法 





olf 
list-style:none; 


当 用 户 使 用 标签 选择 器 定义 某 个 标签 样式 后 ， 
其 整个 网 页 中 的 所 有 该 标签 都 会 自动 应 用 这 一 样 
式 .CSS 在 原则 上 不 允许 对 同一 标签 的 同一 个 属性 
进行 重复 定义 , 但 在 实际 操作 中 将 会 以 最 后 一 次 定 
义 的 属性 值 为 准 。 
2. 类 选择 器 

CSS 样式 中 的 类 选择 器 可 以 把 不 同类 型 的 网 
页 标签 归 为 一 类 . 并 为 其 定义 相同 的 样式 , 以 简化 
CSS 代码 。 

在 使 用 类 选择 器 时 , 需要 在 类 选择 嚣 名称 的 前 
面 添加 类 符号 “ 圆 点 ”(.)。 

而 在 调用 类 的 样式 时 ， 则 需要 为 HTML 标签 
添加 class 属性 . 并 将 类 选择 器 的 名 称 作为 class 属 
性 的 值 。 























在 通过 class 属性 调用 类 选择 器 时 ， 不 需要 


在 属性 值 中 添加 类 符号 “.”， 直 接 输入 类 选 
择 器 的 名 称 即 可 。 
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例如 ,网 页 文档 中 有 三 个 不 同 的 标签 , 一 个 是 
层 (div) . 一 个 是 段落 tp) .一 个 是 无 序列 表 (ul)。 
如 果 使 用 标签 选择 器 为 这 三 个 标签 定义 样式 .使 其 
中 的 文本 变 为 红色 ， 则 需要 编写 三 条 CSS 代码 。 

和 反串 时 ， 则 需要 使 用 其 计 属性 。 

et 例如 ， 通 过 ID 选择 器 分别 定义 某 个 无 序列 

) 表 中 三 个 列表 项 的 样式 。 





设 定 JD 属性 . 并 通过 该 了 D 定义 CSS 样式 。 但 是 . 
HIML 文档 并 不 允许 两 个 标签 使 用 同一 个 人 D。 

在 创建 人 D 选择 器 时 ， 需 要 在 选择 器 名 称 前 面 
添加 “ 井 号 ”(#)。 但 是 , 在 为 HIML 标签 调用 了 D 
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Pp{/* 定 义 网 页 文档 中 所 有 段落 的 样式 */ 
color:#ff0000; 

} 

ul{/* 定 义 网 页 文档 中 所 有 层 的 样式 */ 
Color:#ff0000; 


#1istLeft{ 
float:1left; 
#1listMiddle{ 
float:inherit; 


9 } 





使 用 类 选择 器 ， 则 可 以 将 上 述 三 条 CSS 代码 eat 
合并 为 1 条 float:right; 
全 ; 
} 
.redText{ 是 
color:#ff0000; 然后 ， 便 可 使 用 标签 的 id 属性 ， 应 用 三 个 列 
} 表 项 的 样式 。 
然后 ， 即 可 为 div、p 和 ul 等 标签 添加 class <ul> 


a <1i id="listLeft"> 左 侧 列表 </1i> 
属性 ， 应 用 美 选择 项 的 样式 <1i idq="1istMiddle"> 中 部 列表 </1i> 


<div class="redText"> 红 色 文 本 </div> <1i idq="1istRight"> 右 侧 列表 </1i> 
<p class="redText"> 红 色 文 本 </p> </ul> 


<ul class="redText"> 
<1i> 红 色 文本 </1i> 


</ul> 在 编写 HTML 文档 的 CSS 样式 时 ， 通 常 在 
局 标签 月 9 样式 (这些 样式 通常 不 会 
一 个 类 选择 器 可 以 对 应 于 文档 中 的 多 种 标签 布局 标签 所 使 用 的 样式 (这 些 样式 通常 不 


或 多 个 标签 ， 充 分 体现 了 CSS 代码 的 可 重复 性 。 
类 选择 器 与 标签 选择 器 都 具有 各 自 的 用 途 . 但 
相对 于 标签 选择 器 来 讲 , 类 选择 器 可 以 指定 某 一 个 
范围 内 的 应 用 样式 .具有 更 大 的 灵活 性 。 除 此 之 外 . 
对 于 类 选择 器 来 讲 , 其 标签 选择 则 具有 操作 简单 和 








重复 ) 中 使 用 ID 选择 器 ， 而 在 内 容 标签 所 
使 用 的 样式 (这些 样 式 经 常会 多 次 重复 ) 中 
使 用 类 选择 器 。 














4. 伪 类 选择 器 
伪 选 择 器 与 普通 的 选择 嚣 不同, 它 通常 不 能 应 














定义 方便 的 优点 , 使 用 标签 选择 器 可 以 在 不 需要 为 用 于 某 个 可 见 的 标签 . 只 能 应 用 于 一 些 特殊 标签 的 
标签 添加 任何 属性 的 前 提 下 应 用 样式 。 状态 。 其 中 .最 常见 的 伪 选 择 器 就 是 伪 类 选择 器 。 
3. ID 选择 器 在 定义 伪 类 选择 器 之 前 . 必须 首先 声明 定义 的 


ID 选择 器 是 一 种 只 针对 某 一 个 标签 的 、 唯 一 
性 的 选择 器 , 它 不 像 标签 和 类 选择 器 那样 可 以 设 定 
多 个 标签 的 CSS 样式 。 

在 HIML 文档 中 . 用 户 可 以 为 任意 一 个 标签 


是 哪 一 类 网 页 元 素 . 并 将 这 类 网 页 元 素 的 选择 器 写 
在 伪 类 选择 嚣 之前， 中 间 使 用 “冒号 ”(:) 隔 开 。 








selector:pseudo-class{property:v 
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aluel 


/* 选 择 器 : 伪 类 {属性 : 属性 值 : }*/ 


在 CSS 标准 中 ， 共 包含 下 表 所 示 的 7 种 伪 类 
选择 器 。 











:link 未 被 访问 过 的 超 链接 
:hover | 鼠标 滑 过 超 链接 
:active 被 激活 的 超 链接 
:visited 被 访问 过 的 超 链接 
:focus 输入 焦点 时 的 对 象 样式 
:first-child 第 1 个 子 对 象 的 样式 
:first 第 1 页 使 用 的 样式 





例如 , 当 需 要 去 除 网 页 中 所 有 超 链接 在 默认 状 
态 下 的 下 划 线 时 ， 就 需要 使 用 伪 类 选择 器 。 

a:linkt{ 

/* 定 义 超 链接 文本 的 样式 */ 

text-decoration:none; 

/* 去 除 文本 下 划 线 */ 

} 
5. 伪 对 象 选择 器 

伪 对 象 选 择 器 也 是 一 种 伪 选 择 器 . 其 主要 作用 
是 为 某 些 特定 的 选择 器 添加 效果 。 

在 CSS 标准 中 ， 共 包含 下 表 所 示 的 4 种 伪 对 
象 选择 器 。 


伪 对 象 选择 器 










定义 选择 器 所 控制 的 文本 第 一 个 
字 或 字母 
定义 选择 器 所 控制 的 文本 第 一 行 
定义 某 一 对 象 之 后 的 内 容 
定义 某 一 对 象 之 前 的 内 容 


:first-letter 






伪 对 象 选择 器 的 使 用 方法 与 伪 类 选择 器 类 似 . 
都 需要 先 声明 定义 的 是 哪 一 类 网 页 元 素 . 并 将 这 类 
网 页 元 素 的 选择 器 写 在 伪 对 象 选择 器 之 前 . 并 使 用 
“冒号 ”(:) 隔 开 。 

例如 ,定义 某 一 个 段落 文本 中 第 1 个 字 为 
2em， 即 可 使 用 伪 对 象 选择 器 。 





pt{ 
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font-size:12px; 
} 
p:first-lettert{ 
font-size:2em; 


} 
14.3.2 CSS 选择 方法 


通过 CSS 选择 方法 ， 可 以 对 各 种 网 页 标签 进 
行 复杂 的 选择 操作 ， 以 提高 CSS 代码 的 效率 。 

在 CSS 语法 中 ， 存 在 多 种 选择 方法 ， 最 常用 
的 选择 方法 有 包含 选择 、 分 组 选择 和 通用 选择 。 
1. 包含 选择 

包含 选择 通常 应 用 于 定义 各 种 多 层 赃 套 网 页 
元 素 标签 的 样式 ， 可 根据 网 页 元 素 标签 的 说 套 关 
系 . 来 帮助 浏览 器 精确 地 查找 该 元 素 的 位 置 。 

在 使 用 包含 选择 方法 时 , 需要 将 具有 包含 选择 
关系 的 各 种 标签 按照 指定 的 顺序 写 在 选择 器 中 . 并 
以 空格 来 分 开 这 些 选择 器 。 例 如 , 在 网 页 中 , 有 三 
个 标签 的 找 套 关系 如 下 所 示 。 














<tagName1> 
<tagName2> 
<tagName3>innerText .</tagName3> 
</tagName2> 
</tagName1> 
<tagName3>outerText</tagName3> 


如 上 述 代码 中 ，tagNamel 、tagName2 和 
tagName3 分 别 代 表 三 个 不 同 的 标签 。 其 中 . 
tagName3 标签 在 网 页 中 出 现 两 次 。 如 果 直 接 通 过 
tagName3 的 标签 选择 器 定义 outerText 文本 的 样 
式 ， 则 势必 会 影响 外 部 outerText 文本 的 样式 。 

因此 ， 用户 如 果 需 要 定义 innerText 文本 的 样 
式 且 不 影响 tagName3 以 外 的 文本 样式 ， 则 可 以 通 
过 包含 选择 方法 进行 定义 ， 其 代码 如 下 所 述 。 





tagNamel tagName2 tagName3 {property: 
value;} 


在 上 面 的 代码 中 . 以 包含 选择 的 方式 定义 了 包 
含 tagNamel 和 tagName2 标签 中 的 tagName3 标签 
的 CSS 样式 .同时 .该 CSS 样式 不 会 影响 tagNamel 
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标签 外 的 tagName3 标签 的 样式 。 

包含 选择 的 方法 不 仅 可 以 将 多 个 标签 选择 器 
组 合 起 来 使 用 ， 而 且 还 适用 于 人 D 选择 器 、 类 选择 
器 等 多 种 选择 器 。 
2. 分 组 选择 

分 组 选择 是 一 种 用 于 同时 定义 多 个 相同 CSS 
样式 的 标签 时 所 使 用 的 选择 方法 . 定义 时 需要 将 选 
择 器 以 “去 号 ”(,) 分 开 。 








selectorl, selector2{property:val 
ue;} 


在 上 面 的 代码 中 , selectorl 和 selector2 分 别 表 
示 应 用 于 相同 样式 的 两 个 选择 器 , 而 Property 则 表 
示 CSS 样式 属性 ，value 表示 CSS 样式 属性 值 。 

例如 ， 在 定义 网 页 中 的 <body> 标 签 ， 以 及 所 
有 的 段落 、 列 表 的 行 高 均 为 18px 时 ， 其 代码 如 下 
所 述 。 








body,p,ul,1i,ol{ 
line-height:18px; 
} 


在 编写 网 页 的 CSS 样式 时 ,使 用 分 组 选择 方 
法 可 以 定义 多 个 HTML 元 素 标签 的 相同 样式 ， 提 
高 代码 的 重用 性 。 
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3. 通用 选择 

通用 选择 方法 的 作用 是 通过 通配符 “*”. 对 网 
页 标签 进行 选择 操作 。 

使 用 通用 选择 方法 . 可 以 方便 地 定义 网 页 中 所 
有 元 素 的 样式 ， 其 代码 如 下 所 述 。 


*{property:value;} 
在 上 面 的 代码 中 ， 通配符 * 可 以 替换 网 页 中 所 


有 的 元 素 标签 。 例如, 定义 网 页 中 所 有 标签 的 文本 
大 小 为 12px， 其 代码 如 下 所 述 。 








*{font-size:12px;} 


同 理 . 使 用 通用 选择 也 可 以 定义 某 一 个 网 页 标 
签 中 谋 套 的 所 有 标签 样式 。 例如 , 定义 id 为 testDiv 
的 层 中 所 有 文本 的 行 高 为 30px, 其 代码 如 下 所 述 。 





#testDiv*{line-height:30px;} 


使 用 通用 选择 方法 时 ， 会 影响 所 有 的 元 素 ， 
不 慎 使 用 的 话 ， 则 会 影响 整个 网 页 的 布局 。 


由 于 通用 选择 方法 的 优先 级 是 最 低 的， 因此 
在 为 各 种 网 页 元 素 设置 专 有 的 样式 后 ， 需 取 
消 通 用 选择 方法 的 定义 。 
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在 Dreamweaver 中 ,通过 CSS 样式 可 以 定义 
页 面 元 素 的 文本 、 背 景 、 边框 、 背 景 等 外 观 效果 。 
用 户 可 通过 【CSS 设计 器 】 面 板 ， 对 CSS 样式 属 
性 进行 可 视 化 操作 。 


14.4.1 设置 布局 样式 


布局 样式 主要 用 来 设置 网 页 元 素 的 位 置 属性 . 
包括 大 小 、 填 充 、 边 距 等 。 

在 【属性 】 窗 格 中 . 打开 【布局 】 选 项 卡 . 设 
置 新 选择 器 样式 的 各 属性 。 

其 中 , 在 【布局 】 选 项 卡 中 . 主要 包括 下 列 一 
些 属性 。 
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口 width 用 于 设置 元 素 的 宽度 ， 默 认为 
auto， 单 击 该 选项 ， 可 在 列表 中 选择 其 他 
选项 ， 并 根据 选项 类 型 输入 宽度 值 。 


height 用 于 设置 元 素 的 高 度 ， 默 认为 
auto， 单 击 该 选项 ， 可 在 列表 中 选择 其 他 
选项 ， 并 根据 选项 类 型 输入 高 度 值 。 
min-width 用 于 设置 元 素 的 最 小 宽度 。 
min-height 用 于 设置 元 素 的 最 小 高 度 。 
max-width 用 于 设置 元 素 的 最 大 宽度 ， 
默认 为 none, 单 击 该 选项 ,可 在 列表 中 选 
择 其 他 选项 ， 并 根据 选项 类 型 输入 宽度 
值 。 

max-height 用 于 设置 元 素 的 最 大 高 度 ， 
默认 为 none， 单 击 该 选项 ， 可 在 列表 中 选 
择 其 他 选项 ， 并 根据 选项 类 型 输入 高 度 值 。 
display 用 于 设置 元 素 的 显示 方式 , 默认 
为 inline， 可 单 击 该 选项 ， 在 其 列表 中 选 
择 相应 的 显示 方式 。 

box-sizing 用 于 以 特定 的 方式 定义 匹配 
指定 区 域 的 特定 元 素 。 

margin 用 于 设置 元 素 的 边界 ， 当 为 元 素 
设置 边框 时 ,该 选项 表示 边框 外 侧 的 空白 
区 域 。 用 户 可 通过 设置 上 下 左右 值 来 调整 
元 素 的 边界 ， 或 者 直接 在 【设置 速记 】 文 
本 框 中 输入 设置 边 距 的 速记 值 。 

padding 用 于 设置 元 素 的 填充 ， 当 为 元 
素 设置 边框 时 ， 该 选项 表示 边框 和 内 容 之 
间 的 空白 区 域 。 用 户 可 通过 设置 上 下 左右 
值 来 调整 元 素 的 填充 ， 或 者 直接 在 【设置 
速记 】 文 本 框 中 输入 设置 填充 的 速记 值 。 
position 用 于 设置 元 素 的 定位 方式 ， 其 
中 ，static (静态 ) 选项 为 默认 选项 ， 表 示 
无 特殊 定位 ; absolute (绝对 ) 选项 表示 绝 
对 定位 ， 其 左上 角 的 顶点 为 元 素 的 定位 原 
点 ， 可 通过 设置 tptp、Tight、bottom 和 left 
选项 控制 元 素 相 对 于 原点 的 位 置 ; fixed 
(固定 ) 选项 表示 固定 位 置 ， 其 位 置 将 保 
持 不 变 ; relative (相对 ) 选项 表示 相对 定 
位 ， 可 通过 设置 top、Tight、bottom 和 left 
选项 控制 元 素 相对 于 网 页 中 的 位 置 。 

float 用 于 设置 元 素 的 滔 动 定位 ， 也 就 是 
对 象 的 环绕 效果 。 其 中 Lefl 国 选项 表示 对 
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象 居 左 ， 其 文字 等 内 容 从 另 一 侧 进行 环 
绕 ; Righ 例 选项 表示 对 象 居 右 ， 其 文字 等 
内 容 从 另 一 侧 进 行 环绕 ; 而 none 国 选项 表 
示 取 消 环 绕 效 果 。 

口 clear 用 于 清除 元 素 的 浮动 效果 。 其 中 ， 
Left 回 表示 清除 元 素 左 侧 的 浮动 效果 ， 
Right 国 选项 表示 清除 元 素 右 侧 的 浮动 效 
果 ，Both 国 选项 表示 清除 元 素 左 侧 和 右 侧 的 
浮动 效果 ,none 国 选项 表示 不 清除 浮动 效果 。 

口 overflow-x/y 用 于 设置 元 素 水 平 溢出 和 
重 直 溢出 的 行为 方式 。 

口 visibility 用 于 设置 元 素 的 可 见 性 。 其中， 
inherit 选项 用 于 设置 谋 套 元 素 ， 其 主 元 素 
会 继承 父 元 素 的 可 见 性 ; Visible 选项 表示 
元 素 始 终 处 于 可 见 状态 ; hidden 选项 表示 
元 素 始终 处 于 隐藏 状态 。 

口 z-index 用 于 设置 元 素 的 堆积 顺序 。 

口 opacity 用 于 设置 元 素 的 不 透明 度 。 


设置 文本 样式 
文本 是 网 页 中 最 基础 的 元 素 之 一 ， 通 过 【CSS 





设计 器 】 面 板 中 的 【属性 】 窗 格 , 不 仅 可 以 设置 文 
本 的 字体 样式 .而 且 还 可 以 设置 文本 的 阴影 效果 。 
1. 设置 字体 样式 


字体 样式 主要 用 于 设置 字体 的 外 观 样式 .包括 


文本 颜色 . 字体 系列 . 字体 样式 等 一 系列 的 属性 选项 。 

















其 中 . 各 种 属性 选项 的 具体 含义 如 下 所 述 。 

口 color 用 于 设置 字体 颜色 ， 单 击 【 设 置 颜 
色 】 按 钮 - 直 ， 可 在 展开 的 颜色 选择 窗口 中 
设置 字体 颜色 ， 也 可 以 在 文本 框 中 直接 输 
入 颜色 值 。 
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口 font-family 用 于 设置 字体 系列 ， 单 击 属 
性 值 ， 可 在 其 列表 中 选择 一 种 字体 组 合 系 
列 。 另 外， 还 可 通过 选择 【管理 字体 〗 选 
项 ， 来 管理 本 地 字体 系列 。 

口 font-style 用 于 设置 字体 样式 ， 其 normal 
选项 表示 标准 的 字体 样式 , italic 选项 表示 
带 有 斜体 变量 的 字体 所 使 用 的 斜体 ， 
oblique 选项 表示 无 斜体 变量 的 字体 所 使 
用 的 倾斜 。 

口 font-variant 用 于 设置 字体 变形 效果 , 其 
normal 选项 表示 标准 的 字体 样式 , small-caps 
选项 表示 小 型 大 写字 母 的 字体 样式 。 

口 font-weight 用 于 设置 字体 的 粗细 程度 。 

口 font-size 用 于 设置 字体 的 大 小 ， 可 通过 
单 击 属性 值 来 设置 字体 大 小 的 单位 ， 并 输 
入 相应 的 大 小 值 。 

口 line-height 用 于 设置 文本 的 行 高 ,可 通过 
单 击 属性 值 来 设置 文本 行 高 的 单位 ， 并 输 
入 相应 的 行 高 值 。 

口 text-align 用 于 设置 文本 的 对 齐 方式 , 其 
中 left 选项 国 表示 文本 左 对 齐 ,center 选项 
国 表示 文本 居中 对 齐 ，right 选项 国 表示 文本 
右 对 齐 ，justify 选项 国 表示 文本 两 端 对 齐 。 

口 tetxt-decoration 用 于 设置 文本 的 修饰 效 
果 , 其 中 国 none 选项 表示 不 对 文本 进行 任 
何 修饰 ，underline 选项 国 表示 
下 划 线 ，overline 选项 国 表示 对 文本 添加 
上 划 线 , line-through 选项 国 表示 对 文本 添 
加 删除 线 。 

口 text-indent 用 于 设置 文本 的 首 行 缩 进 ， 
可 以 直接 输入 缩 进 值 。 

2. 设置 字体 阴影 

字体 阴影 效果 为 CSS 3.0 中 新 增 的 属性 , 主要 
用 于 设置 文本 的 水 平 阴 影 . 垂直 阴影 和 阴影 颜色 等 
阴影 效果 。 
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其 中 ,有 关 字体 阴影 属性 的 各 选项 的 具体 含义 
如 下 所 述 。 
口 h-shadow 用 于 设置 文本 的 水 平 阴影 ， 其 
属性 值 双 许 负 值 的 存在 。 
口 v-shadow 用 于 设置 文本 的 垂直 阴影 ， 其 
属性 值 允 许 负 值 的 存在 。 
口 blur 用 于 设置 文本 阴影 的 模糊 半径 。 
口 color 用 于 设置 文本 的 阴影 颜色 。 
3. 其 他 字体 样式 
在 【属性 】 窗 格 中 , 除了 普通 的 字体 样式 和 阴 
影 样式 之 外 ， 还 包括 一 些 其 他 的 字体 样式 。 例 如 ， 
设置 列表 项 目标 记 类 型 、 设置 垂直 对 齐 方式 等 字体 
样式 。 











text-transfom : Ab AB at 
letter-spadng 
word-spadng 
White-space 
vertical-align 


list-style- 
posion 1 到 至 
list-styleimage ， 








list-styletype 





其 中 ,有 关 其 他 字体 样式 属性 的 各 选项 的 具体 
含义 如 下 所 述 。 
口 text-transfom 用 于 设置 英文 字体 的 大 小 
写 格式 ， 其 中 none 选项 国 表示 标准 样式 ， 
capitalize 选项 贺 表 示 每 个 单词 以 大 写字 母 
开头 , Uppercase 选项 圈 表 示 每 个 单词 都 以 
大 写字 母 进行 显示 , lowercase 选项 国 表示 
每 个 单词 都 以 小 写字 母 进行 显示 。 
口 letter-spadng 用 于 设置 文本 中 字符 之 间 
的 空格 。 
口 word-spadng 用 于 设置 单词 之 间 的 距离 。 
口 white-space 用 于 设置 源 代码 中 空格 的 
显示 状态 ,其 中 normal 选项 表示 忽略 所 有 
空格 ，nowrap 选项 表示 不 自动 换行 ，pre 
选项 表示 保留 源 代码 中 的 所 有 空格 ， 
pre-line 选项 表示 忽略 空格 并 保留 源 代码 
中 的 换行 ，pre-Wrap 选项 表示 保留 源 代码 
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中 的 空格 并 正常 换行 。 口 color 用 于 设置 边框 线 的 颜色 。 
口 vertical-align 用 于 设置 重 直 对 齐 方式 。 口 border-radius 用 于 设置 圆 角 边框 效果 ， 
口 list-style-position 用 于 设置 列表 对 象 位 置 。 除了 可 以 通过 设置 边框 半径 的 速记 值 来 
口 list-style-image 用 于 设置 列表 样式 图 像 。 快速 设置 圆 角 效果 之 外 ， 还 可 以 通过 分 别 
口 list-style-type 用 于 设置 列表 项 目的 标记 设置 上 边框 和 下 边框 的 左右 半径 值 ， 来 设 
类 型 。 置 圆 角 效果 。 
o 口 border-collapse 用 于 设置 边框 的 合成 效 
14.4.3 ”设置 边框 样式 果 ， 其 中 collapse 选项 国 表示 合并 单一 的 
边框 样式 主要 用 于 设置 边框 的 高 度 . 颜色 和 圆 边框 ，separate 选项 图 表示 分 开 边 框 。 
角 边 框 效果 等 边框 属性 ， 相 对 于 旧版 本 的 边框 样 口 border-spadng 用 于 设置 相 邻 边框 之 间 


的 距离 ， 第 1 个 属性 值 表 示 重 直 距 离 ， 第 
2 个 属性 值 表示 水 平 距 离 。 


式 ， 新 版 本 的 更 加 简单 直观 。 



































有 性 二 一 
cpm 14.4.4 ”设置 背景 样式 
通过 CSS 样式 中 的 背景 属性 ， 可 以 协助 用 户 
制作 出 漂亮 的 网 页 背景 。 例 如 ,设置 背景 颜色 、 渐 
变 颜色 、 背 景 大 小 、 背 景 剪辑 、 背 景 滚动 模式 等。 
属性 中 一 | 
届 团 口 口 品 口 8 示 第 
圈 背景 
badoroundeor : [2 
background-amage 
borderalapse ,| 下 
ions ， er ee 
在 【边框 ] 选项 卡 中 ,系统 为 用 户 划分 了 所 有 Se 
边 、 顶部 . 右 侧 . 底部 和 左 侧 5 种 不 同 的 边框 样式 ， 3 
用 户 可 根据 设计 需求 来 设置 不 同 的 边框 样式 . 除 此 Satan 
之 外 , 用 户 还 可 以 通过 border 选项 , 来 快速 设置 边 er ear 
框 的 速记 值 ， 使 其 应 用 到 所 有 边框 选项 中 。 ee :we 





Dreamweaver 中 的 5 种 边框 样式 具有 相同 的 属 
性 选项 . 下 面 根据 【所 有 边 】 边 框 样式 来 详细 介绍 
边框 属性 选项 的 具体 含义 。 
口 width 用 于 设置 边框 的 宽度 。 
口 style 用 于 设置 边框 的 样式 ， 包 括 none 
(无 )、dotted (点 划 线 )、dashed (虚线 )、 
solid ( 实 线 )、double ( 双 线 )、groove ( 档 
状 线 )、ridge ( 疹 状 线 )、inset ( 媚 进 ) 
outset ( 凸 出 ) 和 hidden (隐藏 ) 。 





【背景 】 选 项 卡 中 各 属性 选项 的 具体 含义 ， 如 
下 所 述 。 

口 background-color 用 于 设置 背景 颜色 。 

口 background-image 用 于 设置 背景 图 像 
样式 ， 用 户 可 以 在 Ul 文本 框 中 输入 图 像 
的 文件 地 址 ， 或 者 单 击 文本 框 右 侧 的 【 浏 
览 〗】 按 钮 来 选择 图 像 路 径 。 另 外 ， 可 通过 
gradient 属性 ， 来 设置 图 像 的 渐变 颜色 。 
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口 background-position 用 于 设置 背景 图 像 
的 水 平和 垂直 位 置 。 

口 background-size 用 于 设置 背景 图 像 的 
大 小 。 

口 background-clip 用 于 设置 背 录 裁剪 区 


域 ， 其 中 padding-box 选项 表示 从 padding 


区 域 向 外 裁 尊 区 域 ，border-box 选项 表示 
从 border 区 域 向 外 裁剪 区 域 , content-box 
表示 从 content 区 域 向 外 裁剪 区 域 。 

用 于 设置 背景 的 平 
铺 方式 ， 其 中 repeat 选项 国 表示 可 以 在 水 
平和 重 直 方向 的 平 铺 ，Iepeat-x 选项 国 表 
示 只 能 在 水 平方 向 上 平 铺 ，repeat -y 选项 


口 background-repeat 
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人 
ee 


转 表 示 只 能 在 重 直 方向 上 平 销 ，nho-Iepeat 
选项 圆 表示 不 对 背 录 进行 平 铺 。 

口 background-origin 用 于 设置 背景 的 绘 
制 区域 。 

口 background-attachment 
的 滚动 模式 。 

口 box-shadow 用 于 设置 背景 的 阴影 效果 ， 
h-shadow 选项 用 于 设置 水 平 阴 影 ， 
V-shadow 选项 用 于 设置 重 直 阴影 ，blur 选 
项 用 于 设置 框 阴影 的 模糊 半径 ，spread 选 
项 用 于 设置 框 阴影 的 扩散 半径 ,color 选项 
用 于 设置 阴影 颜色 , inset 选项 用 于 转换 外 
部 和 内 部 投影 。 





用 于 设置 背景 


I 使 用 CSS 过 渡 效 果 


在 Dreamweaver 中 ,除了 可 以 视觉 性 地 创建 
样式 表 之 外 , 还 可 以 通过 创建 CSS 过 渡 效 果 
出 网 页 元 素 的 动态 效果 。 


5.1 创建 CSS 过 渡 效 果 


首先 ,执行 【窗口 】| 【CSS 过 渡 效 果 】 命 令 ， 
【CSS 过 渡 效 果 ] 面板 , 单 击 【 新 建 过 渡 效 果 】 


按钮 。 


设置 
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建 过 渡 效 果 】 按 钮 。 














然后 ， 在 弹出 的 【新 建 过 渡 效 果 】 对 话 框 中 . 
目标 规则 、 过 渡 效 果 开 启 等 选项 , 并 单 击 【 创 











在 该 对 话 框 中 ,主要 包括 下 列 10 个 选项 。 

口 目标 规则 用 于 设置 选择 器 的 名 称 ， 其 选 
择 器 可 以 为 任意 类 型 的 CSS 选择 器 。 

口 过 渡 效果 开启 ”用 于 设置 应 用 过 渡 效 果 
的 状态 ,其 中 active 选项 表示 单 击 或 激活 ， 


checked 选项 表示 选中 状态 ，disabled 选项 
表示 禁用 状态 ，enabled 选项 表示 启用 状 
态 ，focus 选项 表示 获得 焦点 状态 ，hover 
选项 表示 鼠标 经 过 或 是 停 状 态 ， 
indeterminate 选项 表示 不 确定 状态 ,target 
选项 表示 打开 超 链 接 状 态 。 











agent 


NRA 


ks eel) UA 


Wa | 


口 对 所 有 属性 使 用 相同 的 过 渡 效 果 ”选择 
该 选项 , 可 以 为 需要 过 渡 的 所 有 CSS 属性 
指定 相同 的 【持续 时 间 〗、 【延迟 〗 和 【 计 
时 功能 〗 选 项 。 

口 对 每 个 层 使 用 不 同 的 过 渡 效 果 ”选择 该 
选项 , 可 以 为 所 需要 过 渡 的 每 个 CSS 属性 
指定 不 同 的 【持续 时 间 外 【延迟 】 和 【 计 
时 功能 〗 选 项 。 

口 持续 时 间 用 于 设置 过 渡 效 果 的 持续 时 
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间 ， 其 单位 可 以 为 秒 (s) 或 毫秒 (ms) 。 Hy 
口 延迟 用 于 设置 过 渡 效 果 开始 之 前 的 间 
隔 时 间 , 其 单位 可 以 为 秒 (s) 或 毫秒 (ms) 。 
口 计时 功能 ”用 于 设置 过 渡 效 果 的 样式 。 
口 属性 用 于 显示 CSS 属性 , 可 通过 单 击 加 
号 按钮 国 来 添加 CSS 属性 ,通过 单 击 减 号 
按钮 世 ] 出 除 CSS 属性 。 
口 结束 值 ”用 于 设置 过 渡 效 果 的 结束 值 。 
口 选择 过 渡 的 创建 位 置 ”用 于 设置 过 渡 效 
果 的 吝 入 位 置 。 


14.5.2 ”编辑 CSS 过 渡 效 果 


创建 CSS 过 渡 效果 之 后 ， 用 户 可 以 对 该 过 渡 
效果 进行 相应 的 编辑 操作 ,包括 修改 效果 值 、 删 除 
过 渡 效果 等 内 容 。 

1. 修改 过 渡 效 果 值 

在 [CSS 过 渡 效果 】 面 板 中 选择 某 个 过 渡 效果 

单 击 【 编 辑 所 选 过 渡 效 果 】 按 钮 。 











然后 . 在 弹出 的 【删除 过 渡 效 果 】 对 话 框 中 ， 
选择 所 需 删 除 的 规则 内 容 . 单 击 【 删 除 】 按钮 即 可 。 








然后 , 在 弹出 的 【编辑 过 渡 效 果 】 对 话 框 中 , 修 
改 相应 的 效果 选项 , 单 击 【 保 存 过 渡 效 果 ]】 按 钮 即 可 。 
2. 删除 过 渡 效 果 

当 用 户 创建 重复 或 多 余 的 CSS 过 渡 效 果 时 . 
可 通过 删除 功能 ， 来 删除 无 用 的 CSS 过 渡 效 果 。 

在 【CSS 过 渡 效果 】 面 板 中 . 选择 一 个 过 渡 效 
果 ， 单 击 【 删 除 active 伪装 】 按 钮 。 


练习 : 制作 多 彩 时 尚 页 











网 页 中 的 文本 样式 不 可 能 是 一 成 不 变 的 .那样 会 使 网 页 显得 枯 
燥 无 味 。 此 时 ,用 户 可 以 根据 标题 类 型 或 网 页 颜色 来 设置 文本 . 以 增 
加 网 页 的 美观 性 和 可 读 性 。 在 本 练习 中 ,将 运用 Dreamweaver 中 的 








CSS 样式 功能 .来 制作 一 份 多 彩 时 尚 页 。 





鸣 多 脓 时 尚 网 SS 关联 CSS 文件 
3 说 套 Div 层 
添加 链接 
插入 图 像 
设置 文本 样式 
插入 表格 
设置 表格 格式 








操作 步骤 “》》》 STEP|03 在 弹出 的 【选择 样式 表 文件 】 对 话 框 中 ， 
STEP|01 关联 CSS 文件 。 执 行 【窗口 】 | 【CSS 选择 CSS 文件 ， 单 击 【 确 定 】 按 钮 。 

设计 器 】 命 令 ， 单 击 【 添 加 CSS 源 】 按 钮 ， 选 择 
【附加 现 有 的 CSS 文件 】 选 项 。 












































STEP|04 制作 版 头 内 容 。 在 【设计 】 视 图 中 ， 执 
行 【插入 】|Div 命令 ， 在 弹出 的 【插入 Div】 对 话 
框 中 ,输入 ID 名 称 ， 并 单 击 【确定 】 按 钮 。 

















STEP|02 在 弹出 的 【使 用 现 有 的 CSS 文件 】 对 话 


















框 中 ， 单 击 【 浏 览 】 按 钮 。 [on 入 ] FR 
使 用 现 有 的 CSS 文件 Class: a 回 单 击 
全 建 Css 规则 
i @ 扩 [#4 
Oo 











* 有 条 件 使 用 (可 选 ) 





STEP|05 删除 标签 内 的 文本 ， 在 该 标签 内 插入 一 


| 个 名 为 logo 的 Div 层 ， 删除 标签 文本 并 插入 logo 
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DO rE 


| 多 i 时 尚 网 加 和 


STEP|06 然后 . 在 Div 层 header 中 插入 一 个 名 为 
daohang 的 Div 层 ,删除 标签 文本 并 输入 导航 文本 。 


可 ] 

















| 























于 

















电能 本 页 | 设 太 攻 页 | 联系 禾 们 





< > 


STEP|07 制作 导航 栏 。 切 换 到 【代码 】 视 图 中 . 
在 Div 层 header 下 方 插入 一 个 名 为 nav 的 Div 层 ， 
并 删除 标签 内 的 文本 。 














<html> 加 
<head> 

4 <meta charset="utf-6"> 

5 <title 多 第 时 沿 网 < 档 </title> 

0 <Unk href="index.css" rel="stylesheet" type="text/css"> 

了 </head> 








STEP|08 在 nav 层 中 插入 一 个 名 为 navLeft 的 Div 
层 , 输入 项 目 列表 内 容 ， 并 创建 列表 链接 。 



















</div> 
14 <div id="nav"> 
<div 记 Nett$<ul> 
16 <Ui><a href= 叶 avascript:void[nutUD in titte=" 首 页 "> 首页 c/a 
>cjty 
17 <Ui2<a href="javascript:void(nutl);" titte- 喇 沿 
1 ali href=njavascript:void[rutD in titte=" 清 流 oy 
>c/t> 
19 <li><a href="javascript:void (null);" title=" 对 意 "> 
26 javascript:voidtnull);" title: 
21 <Uiy<a href="javascript:voidfnutl);"”title-" 街 拍 ": 街 拍 </a 
><1Ui> 
22 <1i2<a href="javascript:void(nul1);"”title=" 图 库 "> 图 库 </a 
i> 
</ uO "| 











,在 nav 层 中 插入 一 个 名 为 
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navRight 的 Div 层 . 在 该 层 内 插入 一 个 3 行 2 列 的 
表格 . 设置 单元 格 属性 并 分 别 设置 单元 格 内 容 。 


< 1d="navRight" "| 
table width="391" border=™ cellpadding= 
pn> 








‘©" cellspacing="e" 


td width="391" height= 
<ti>ca href-"javas 
疝 </a>x/Li> 
<ti><a href="javascriptsvoid(nuLU in titl 
pc/ti> 
ctiyca href="javascript:void(nutD in title= 
ps/L> 
1 <li>ca href="javascript:void(null) ;" title=" 过 多 "> 
车 你 c/ac/ti> 
32 <li>¢a href="javascript:void(null);" title= 
街 拍 </a></ti> 
</utcltd 
tr 


vaaocu 
Ptvoid(nutLD 3n title- 时 沿 "> 






















玩意 "> 





:有 拍 "> 


5" lign="center" valign="botton"><input v 

















STEP|10 制作 导航 图 片 。 在 Div 层 nav 下 方 插 入 
一 个 名 为 banner 的 Div 层 ， 用 于 显示 导航 图 片 。 







; 


htmty 





wr 


STEP|11 制作 时 尚 列表 内 容 。 在 Div 层 banner 方 
法 插入 一 个 名 为 content 的 Div 层 。 然 后 ， 在 该 层 



















中 广 套 一 个 名 为 leftmain 的 Div 层 , 同时 再 赃 套 一 
个 名 为 tile 的 Div 层 . 并 输入 标题 文本 。 
nbsp;énbsp; <ime src="inages/ma_14.jpg" width="46" 出 
height="21" align="bottom" />¢/td; 
mu 
网 、 时 由 caiv 
加 </div> 
3 cats 





STEP|12 在 tide 层 下 方 插入 一 个 Div 层 ， 并 将 该 
层 的 Class 设置 为 rows。 同 时 . 在 该 层 中 嵌入 一 个 
名 为 pic 的 Div 层 . 并 插入 层 图 像 。 
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可 nbspyenbspy me src=" nages/na_ 14. Pe" wi dth="a6r 
height="21" align="bottom 
38 J 











mm 











STEPI13 然后 , 在 pic 层 下 方 庶 入 一 个 关联 detail 2 Wee 
CSS 样式 的 Div 层 , 输入 介绍 性 文本 , 并 设置 文本 
的 字体 格式 和 链接 地 址 。 使 用 同样 的 方法 , 制作 其 STEP|15 制作 版 尾 内 容 。 在 Div 层 content 下 方 ， 























他 时 尚 列表 内 容 层 。 插入 一 个 名 为 footer 的 版 尾 层 . 在 该 层 内 插入 一 个 
加 3 行 1 列 的 表格 . 设置 单元 格 的 属性 并 为 其 添加 内 
容 。 


儿 字 ;</span> <span ra 而 省 
办 十 为 自己 的 经 式 撤 上 区 于 外 衣 ， 打 





STEP|14 制作 间隔 栏 和 热点 推荐 。 紧 接着 ,插入 
一 个 名 为 centermain 和 rightmain 的 Div 层 , 输入 
文本 并 设置 文本 样式 和 插入 图 像 。 


,十 而 练 习 : 制作 图 片 新 闻 页 


在 图 片 新 闻 网 页 中 ， 通 常 提供 新 闻 事件 的 各 种 照片 、 分 析 图 像 
等 内 容 ， 以 作为 吸引 读者 阅读 新 闻 内 容 的 媒介 .在 本 练习 中 ,将 通过 i 
制作 图 片 新 闻 页 ， 来 详细 介绍 CSS 样式 表 的 使 用 方法 。 关联 CSS 文件 


_ 谋 套 Div 层 
名 国 上 wan aa 


























添加 链接 
插入 图 像 
设置 文本 样式 








每 有 机 





306 





:; 网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 





操作 步骤 “》》》 

STEP|01 关联 CSS 文件 .新 建 空白 文档 .执行 [ 窗 
口 】| 【CSs 设计 器 】 命 令 ,， 单 击 【 添 加 CSS 源 】 
按钮 ， 选择 【附加 现 有 的 CSS 文件 】 选 项 。 














STEP|02 在 弹出 的 【使 用 现 有 的 CSS 文件 】 对 话 
框 中 ， 单 击 【 浏 览 】 按 钮 。 










STEP|03 在 弹出 的 【选择 样式 表 文件 】 对 话 框 中 . 
选择 CSS 文件 ， 单 击 【确定 】 按 钮 。 





四 
© 


@#E es Fa 
semBa | Cm | 


STEP|04 制作 导航 栏 部 分 。 执 行 【插入 】IDiv 命 
令 , 插入 一 个 名 为 header 的 Div 层 ， 并 在 该 层 内 
容 插 入 logo 图 片 。 


Phe Re ee En Ee Ee 7 


上 
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STEP|05 然后 . 插入 一 个 名 为 nav 的 Div 层 . 在 
该 层 中 赃 套 一 个 名 为 newTitle 的 Div 层 . 并 输入 文 
本 “图 片 新 闻 ”。 


<ritle F</title> 








各 来 口 


"stylesheet" type="text/css"> 
B </head> 


18 <bod, 
1 <div id="header"><ing src= 
a 61.png" width="1663" 


ss 

















> 
[kd 


Bl a 





STEP|06 紧 接 着 插入 一 个 名 为 navText 的 Div 层 ， 
单 击 【 属 性 】 面 板 中 的 【项 目 列表 】 按 钮 ,输入 项 
目 列表 内 容 并 分 别 添加 其 链接 地 址 。 


二 <div_ 1d="newr1tLe"> 图 片 新 闻 </div> 4| 
EE iy jd"navTextn 

15 ‘ub 

16 cca href="javascript:void(nu11) ;ntitte=" 电 新 图 片 "最 新 


图 8 </ay</Ui> 







javascripr:vo1d(nutU ;”t1tle=" 热 门 图 片 "> 执 门 
i A titte= "新 闻 图 片 "> 新 闻 
ef-njavascript:vaid(nutU) jw titte=, 艺 术 图 片 % 艺 术 
href="javascr1pt:vyotd(nutU) i”tItLe=" 历 史 图 片 "> 历史 


href-njavaseriptsveid(nuLU ;" titte=" 交 村 图 片 "> 资料 


vv 





STEP|07 制作 主体 结构 。 在 网 页 的 空白 区 域 ， 插 
入 一 个 名 为 newsbody 的 Div 层 ， 并 在 其 中 嵌 套 名 
为 newsAnmail 和 newsMonth 的 Div 层 。 





18 <ti><a href="javascript:void(nutt);" title=" 新 闻 图片 "> 新 闻 人 ^ 
图 片 c/a>c/t> 

19 <ti><a href="javascript:void(null);" title=" 艺 术 图 片 "> 艺术 
Fi </a></ Ui> 

28 <ti><a href="javascript:void(null);"title=" 历 史 图 片 "> 历史 
图 片 /a>c/11> 

2 sa href-rjavascriptiveld(nutt)i” titte-" 资 料 图 片 "> 资料 











STEP|08 在 Div 层 newsAnmail 中 . 插入 一 个 名 
为 bigpic 的 Div 层 , 插入 图 片 . 输入 文本 并 设置 文 
本 的 字体 格式 。 
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图 片 </a></1i> 













cjdtv> 
<div 1d="newsMonth"></div> 
/o> 


</body> 
</htnb> 





STEP|09 然后 
板 中 ， 将 Class 设置 为 smallpic。 























STEP|10 在 该 Div 层 中 再 插入 一 个 Div 层 , 在 【 属 
性 】 面 板 中 将 Class 设置 为 pic， 并 在 其 中 插入 一 
张 图 片 。 


图 片 <ja></14> | 
a ctiyca hrefcnjavascript:votd(rutUin titte=" 资 料 加 片 "> 资料 
图 片 cjaye/tt> 












or img arc-"images/222.jpg" width-"se0" 


pan ‘</div> 


</g1v> 


</div> 
<div 1d="newsMonth"></div> 
35 </div> v 





STEP|11 同时 ， 在 该 层 的 下 方 插入 一 个 Div 层 . 
在 【属性 】 面 板 中 将 Class 设置 为 picTest， 并 在 其 
中 输入 说 明 性 文本 。 使 用 同样 的 方法 . 制作 其 他 图 
片 层 。 

STEP|12 制作 每 月 精 选 内 容 .在 Div 层 newsMonth 
中 插入 名 为 monthText 的 Div 层 . 并 输入 标题 
文本 。 

















2 <Uiy<a href="javascript:void(null);" titLes9 甩 区 图 "> 历史 A 轩 /a U> | 
上 </a></ti> _ 2 <Lf><a href="javascrfpt:void(nutU)i” titte=" 资 料 图 片 "> 资料 
21 <li><a href="javascript:void(nutUD:" titte=" 资 料 图 片 "> 资料 


. 插入 一 个 Div 层 . 在 【属性 】 面 





/</> 





< > ing src=" Inages/222.jpg" width="s00" 
hetant="ae9"> capon 也 针 身 痉 仍 能 </span> </div> 
div class="smallpicn> 


<ing src="images/386494_small.jpg" width 







/div> 
div ide"newshonth"> < 


















+ EL 站 
dt 
66 <div class="srallptc"> 
er <dfv cha mg src="images/33812845_small.jpg" 
width="120" he dv 
要 <div cta > 站 要 闪 虹 进出 cbr> 
的 原 北 要 胖 </div> 
me div 
dm 





I 


/div 
/div> 





a </booy> 
3 /honl> 


STEP|13 在 其 下 方 插入 一 个 Div 层 ,在 【属性 】 
面板 中 ,将 Class 设置 为 mPic。 








» 
© CH .0207 

















STEP|14 在 该 Div 层 中 嵌入 一 个 Div 层 . 在 【 属 
性 】 面 板 中 . 将 Class 设置 为 smPic， 并 为 其 添加 
相应 的 图 像 。 














CR 


























STEP|15 然后 .在 该 Div 层 中 嵌入 一 个 Div 层 . 
在 【属性 】 面 板 中 ， 将 Class 设置 为 mpicText. 并 
为 其 输入 说 明 性 文本 。 使 用 同样 的 方法 , 分 别 制作 
其 他 精 选 内 容 。 
































=" iages/33012845_snall.jpg” 
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STEP|16 制作 版 尾 内 容 。 在 网 页 的 空白 区 域 . 插 
入 一 个 名 为 footer 的 Div 层 . 在 其 中 输入 版 尾 文本 
即 可 。 











iV alosez mmpicTextw 电 子 休 硬 ; 世博 aquot EN 有 sauots</div 和 





te 关于 我 们 | 网 站 地 图 | 广告 合作 | 版 权 产 明 | 联 
br> 


系 我 们 | 友情 链接 











14.8 


练习 1: 布局 产品 信息 页 面 
个 downloads\14\ 新 手 训练 营 \ 布 局 产品 信息 页 面 
提示 : 本 练习 中 ,首先 新 建 空白 文档 ,设置 页 面 
属性 ， 并 在 【代码 】 视 图 中 的 <head> 标 签 处 输入 CSS 
规则 代码 。 同 时 ， 在 【设计 】 视 图 中 ,插入 版 头 和 导 
航 栏 Div 标签 层 , 插入 版 头 图 像 . 输入 导航 栏 文 本 并 
设置 文本 的 链接 属性 。 






































然后 ,插入 一 个 总 主体 内 容 的 Div 层 。 同 时 . 在 
该 层 中 获 套 两 个 Div 层 . 并 分 别 关联 CSS 规则 。 在 左 
侧 的 Div 层 中 再 次 能 入 两 个 嵌 套 Div 层 . 分 别 关联 
CSS 规则 并 输入 相应 文本 。 














新 手 训练 营 


在 总 主体 内 容 Div 层 的 右 侧 层 中 , 也 嵌入 两 个 炭 
套 Div 层 , 并 分 别 关联 CSS 规则 。 同 时 , 在 不 同 的 层 
中 分 别 输 入 文本 和 插入 图 片 。 最 后 ,插入 一 个 版 尾 
Div 层 . 并 输入 相关 文本 。 


























练习 2: 布局 个 人 博客 页 面 
全 downloads\14\ 新 手 训练 营 \ 布 局 个 人 博客 页 面 
提示 : 本 练习 中 , 首先 新 建 空白 文档 ， 设 置 页 面 
属性 . 并 在 【代码 】 视 图 中 的 <head> 标 签 处 输入 CSS 
规则 代码 。 在 网 页 中 插入 一 个 包含 版 头 图 片 的 Div 层 ， 
司 时 .插入 导航 栏 Div 层 . 输入 文本 并 设置 文本 的 链 
接 属性 。 
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在 网 页 空白 区 域 插入 一 个 主体 机 构 的 Div 层 . 同 
时 通过 嵌 套 Div 层 和 插入 表格 . 以 及 关联 CSS 样式 等 
操作 . 来 布局 主体 内 容 . 插入 图 像 . 输入 文本 并 设置 
文本 的 字体 格式 。 




















， 在 网 页 的 底部 插入 一 个 版 尾 Div 层 ,在 该 
sd 个 1 行 1 列 的 表格 , 设置 表格 属性 并 输入 
表格 内 容 。 






























人 全 但 失 





大 家 来 茂 的 博客 1 











万 











copes 





练习 3: 制作 文章 页 面 
全 downloads\14\ 新 手 训练 营 \ 文 章 页 面 
提示 : 在 本 练习 中 ， 首先 打 开 素材 文件 ,将 光标 
定位 在 leftmain Div 层 中 ， 插 入 一 个 名 为 title 的 Div 
层 , 输入 标题 文本 并 设置 文本 的 链接 属性 。 同 时 , 在 
其 下 方 插入 一 个 名 为 homeText 的 Div 层 , 并 嵌入 
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homeTitle 和 mainHome Div 层 。 












"title"><a href=ng"> 时 间 网 </a>> <a href=" 
中 海浪 温情 怀 28 款 经 典 措 配 <jdiv> 
"homeText"> 
<div id="homeTitle"></div> 
<div ainhome"></div> 
</div> 
</div> 
<div id="centermain™ 





潮流 














然后 ,将 光标 定位 在 homeTitle 层 中 ， 分 别 嵌 入 
htitle、publish 和 mark 三 个 层 。 在 publish 层 中 再 嵌入 
三 个 Div 层 ,关联 CSS 规则 并 输入 内 容 文 本 ， 而 在 
htitle 和 mark 层 中 关联 CSS 规则 并 输入 相应 的 文本 。 












div drtitIemwca href=™ 时尚 指 A 
标 </a> > 弃 出 地 中 海浪 温情 坏 28 喜 
<div id-"homeText"> 





<div 





<div 1d="publish"> 
<div class= 
<div class="fon 

12:15:28</div> 





者 ;</div> 
布 时 间 ;2909-8-4 














6 <dtv class="fonrz 发 表 评论 : 条 点 评 </dtv> 
</div> 
1 <div id="mark"><span class="font2" 字 </span> 
<span class="font3"> 韩 图 世界 潮流 当 漫 挡 6 基 旋 独特 条。 <“/ 
span>c/div> 
</aiv> 
<div id- "nainHone"> </div> 
</div> 
sjdiv> v 








后 ,将 光标 定位 在 mainHome Div 层 中 ， 输 入 
说 明 性 文本 ， 并 设置 文本 的 字体 格式 。 


EE min 四 











今天 
文字 号 成 的 史 各 行 了 了 , 它 1 引 贡 
了 全 世界 年 轻 女 性 的 时 尚 
<pyRSVTI 的 Mi 


和 的 感 人 即 希 望 驮 他 
选择 MsvT 呈 | 的 女性 间 用 关 本 中 HSV 的 1 甘 平 达 到 最 所 配 出 居于 自 


己 的 风 桔 。</p> 
eh rdevoi 
人 教 的 同时 


















<div> 标 签 是 HTML 众多 标签 中 的 一 个 , 它 相当 于 一 个 容器 或 一 个 方 框 , 用 户 可 以 将 网 页 中 的 文字 、 
图 片 等 元 素 放 到 这 个 容器 中 。 然 后 ,使 用 CSS 样式 ， 统 一 且 方 便 地 控制 这 些 容器 性 标签 ， 为 网 页 内 容 
进行 布局 ， 从 而 可 以 更 有 效 地 控制 网 页 外 观 . 使 整个 网 站 看 起 来 更 具有 条 理性 。 本 章 将 详细 介绍 标准 化 
的 Web 布局 技术 、CSS 盒 状 模型 技术 以 及 <div> 标 签 的 使 用 方法 . 帮助 用 户 更 好 地 掌握 标准 化 的 Web 制 
作 方式 。 
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应 用 Div 标签 





页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 ; 











CSS 页 面 布局 使 用 层 合 样式 表格 式 (而 不 是 传 
统 的 HTML 表格 或 框架 ) .用 于 组 织 网 页 上 的 内 容 。 
CSS 布局 的 基本 构造 块 是 <div> 标 签 ， 它 是 一 个 
HTML 标签 , 在 大 多 数 情况 下 用 作文 本 、 图 像 或 其 
他 页 面 元 素 的 容器 。 


15.1.1 了 解 Div 标签 


<div> 标 签 是 用 来 为 HTML 文档 内 大 块 
(block-level) 的 内 容 提供 结构 和 背景 的 元 素 。<div> 
起 始 标签 和 结束 标签 之 间 的 所 有 内 容 都 是 用 来 构 
成 这 个 块 的 ， 其 中 所 包含 元 素 的 特性 由 <div> 标 签 
的 属性 来 控制 , 或 者 通过 使 用 样式 表格 式 化 这 个 块 
来 进行 控制 。 

而 <div> 标 签 则 用 于 设置 文本 、 图 像 、 表 格 等 
网 页 对 象 的 摆 放 位 置 。 当 用 户 将 文本 、 图 像 . 或 其 
他 对 象 放置 在 <div> 标 签 中 , 则 可 称 作为 DIV block 
(层次 ) 。 






































二 网 卫 




















[Nj [MY 
| | 











; [W 克 














<div> 标 签 可 以 把 文档 分 割 为 独立 的 、 不 同 的 
部 分 。 它 可 以 用 作 严 格 的 组 织 工具 , 并 且 不 使 用 任 
何 格式 与 其 关联 。 如 果 用 id 或 class 属性 来 标记 
<div>， 那 么 该 标签 的 作用 会 变 得 更 加 有 效 。 


15.1.2 插入 Div 标签 


Div 布局 层 是 网 页 中 最 基本 的 布局 对 象 . 也 是 
见 的 布局 对 象 。 它 可 以 结合 CSS 强大 的 样式 

















定义 功能 , 比 表 格 更 简单 、 更 自 
和 样式 。 

首先 . 在 网 页 中 定位 插入 Div 标签 的 位 置 。 然 
后 , 在 【插入 】 面 板 的 【HTML】 选 项 卡 中 ， 单 击 
【Div】 按 钮 。 


i 





地 控制 页 面 版 式 



































日 
TE 
© 
芒 
中 


让 | 











在 弹出 的 【插入 Div] 对 话 框 中 ,可 以 命名 <div> 
标签 或 者 Div 层 的 名 称 ， 并 单 击 【确定 】 按 钮 。 


插入 Div 








搬入 ”| 在 标签 开始 之 后 


v [cinput id"Checkbo v 


























其 【插入 】〗 选 项 会 随 着 网 页 插入 位 置 所 在 的 
内 容 的 改变 而 改变 , 例如 当 用 户 将 Div 的 插 
入 点 定 在 表单 元 素 内 时 ， 其 【插入 】〗】 选 项 内 
容 则 增加 【在 标签 前 】 和 【在 标签 后 】 两 项 





其 中 .【 插 入 Div】 对 话 框 中 各 选项 的 具体 含 
义 . 如 下 表 所 述 。 









将 <div> 标 签 插入 到 当前 光 
标 所 指示 的 位 置 
将 <div> 标 签 插入 到 选择 的 
开始 标签 之 后 

将 <div> 标 签 插入 到 选择 的 
开始 标签 之 前 
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续 表 另外 ， 当 用 户 在 【插入 Div】 对 话 框 中 创建 
CSS 规则 之 后 ,选择 <div> 标 签 既 可 以 在 【CSS 设 


如 在 【 丘 入 】 的 下 扩 列 表 中 。。 计 器 】 面 板 中 查看 和 编辑 它 的 规则 。 
选择 【在 标签 开始 之 后 】 或 


【在 标签 结束 之 前 选项 后 ， 












































全 和 即 可 在 此 列表 中 选择 文档 
中 所 有 的 可 用 标签 ， 作 为 开 
始 标签 
Class 定义 <div> 标 签 可 用 的 CSS 类 
地 定义 <div> 标 签 在 网 页 中 唯 
一 的 编号 标识 i 
根据 该 <div> 标 签 的 CSS 类 加 口 四 日 Dm 
新 建 CSS 规则 或 编号 标记 等 ， 为 该 <div> 国文 
标签 建立 CSS 样式 ee : 国 :ew 
font-family : Constantia, Lucida Bright... 
font-style : oblique 
此 时 ,文档 中 会 显示 所 插入 的 <div> 标 签 ， 并 fomt-veriont cc: smalkaps 
font-weight : bold 
在 Div 层 中 显示 一 段 文 本 以 方便 用 户 选 择 该 层 。 font-size : 2px 
a line-height : normal 
人 所 及 或 :3 出 昔 个 文风 
2. 插入 文本 


在 Dreamweaver 中 ， 可 以 向 <div> 标 签 中 插入 
文本 。 即 选择 该 标签 ,将 插入 点 放 在 标签 中 ,然后 











用 户 也 可 以 执行 【插入 】|Div 命令 ， 在 弹出 
的 【插入 Div】〗 对 话 框 中 设置 属性 ， 并 插入 
<div> 标 签 。 


15.1.3 ”编辑 Div 标签 


插入 <div> 标 签 之 后 ， 便 可 以 对 其 进行 相应 的 ”3” 插入 多 个 Div 层 
操作 了 ， 例 如 添加 文本 、 添 加 Div 层 等 。 Dreamweaver 允许 用 户 在 网 页 中 插入 多 个 
1. 查看 Div 层 <div> 层 。 首 先 ， 将 光标 定位 在 已 经 插入 <div> 层 的 
将 指针 移 到 <div> 标 签 上 时 ，Dreamweaver 将 边框 外 。 然 后 ， 在 【插入 】 面 板 的 HTML 选项 卡 


高 亮 显示 此 标签 。 如 果 用 户 选择 该 Div 层 时 . 则 边 。 中， 单 击 Div 按钮。 
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然后 . 在 弹出 的 【插入 Div】 对 话 框 中 . 设置 
各 项 选项 ， 并 单 击 【 确 定 】 按 钮 。 


入 和 Rv 
Class: | 
iD: [se 


scsi YO 





此 时 , 在 文档 中 将 显示 所 插入 的 Div 层 。 用 户 
可 以 使 用 该 方法 ， 依 次 添加 更 多 的 Div 层 。 


ET 

















a 









eT 
已 
站 


4. 插入 说 套 Div 层 

用 户 还 可 以 在 Div 层 中 , 插入 其 他 Div 层 , 并 
层 与 层 之 间 的 谋 套 。 

首先 ,将 光标 置 于 已 插入 的 Div 层 中 ,并 在 [ 插 
入 】 面 板 的 【常用 】 选 项 卡 中 ， 单 击 Div 按钮 。 

然后 ,在 弹出 的 【插入 Div】 对 话 框 中 ， 设 置 
各 项 选项 ， 并 单 击 【 确 定 】 按 钮 。 





将 
当 






































jcs5A 方 而 大 1 布局 W0 国 。。 
车 HTML 
| Er | 
加 回 hse 

定位 因 后 
i 三 全 
日 目 ra 
BB 加 iere 关 
上 = 














囊 和 : [在 揪 入 点 
Class- v 





iD: [ss 
ok css Ml | 





{EE 


此 时 .可 以 看 到 所 插入 的 ID 为 use 层 , 嵌 套 
在 第 1 个 Div 层 的 内 部 。 





EE PE Ee ee Ee Eee Es 
和 5 和 广泛 大 朱 入 局 到 局 








庶 套 Div 层 时 ， 其 被 谋 套 的 二 级 Div 层 中 的 


CSS 样式 将 会 使 用 第 一 级 的 Div 层 CSS 样式 。 





15.2 


盒 模 型 是 一 种 根据 网 页 中 的 块 状 标签 结构 抽 
象 化 而 得 出 的 一 种 理想 化 模型 , 它 是 控制 页 面 元 素 
的 重要 工具 。 


15;2.4 





盒 模型 概述 


用 户 可 以 将 网 页 中 所 有 块 状 标签 看 作 是 一 
算 形 的 盒子 , 而 CSS eto 
网 页 布局 中 所 占 的 空间 和 位 置 的 基础 。 

用 户 可 通过 CSS 样式 表 定义 盒子 的 高 度 、 宽 
度 、 填 充 和 边框 等 属性 .从 而 实现 网 页 布局 的 标 
准 化 。 





























CSS 盒 模型 是 由 内 容 (content ) 、 填 充 
(padding)、 边 框 (border) 、 边 界 (margin) 等 元 
素 组 成 的 。 用 户 可 通过 CSS 样式 表 ， 方便 地 定义 
盒 模型 各 部 分 的 属性 。 其 中 包括 以 下 几 种 属性 。 
口 内 容 (content) 属性 ”主要 用 来 设置 文字 、 
图 像 等 网 页 元 素 。 

口 填充 (padding) 属性 主要 用 来 设置 内 
容 与 边框 之 间 的 距离 。 

口 边框 (border) 属性 主要 用 来 设置 边框 
的 粗细 、 磊 色 等 边框 样式 。 

口 边界 (margin) 属性 主要 用 来 设置 网 页 
内 容 与 内 容 之 间 的 距离 。 

了 解 盒 模型 的 基本 概念 之 后 , 用 户 在 制作 网 页 
时 还 需要 了 解 下 列 一 些 使 用 盒 模型 的 注意 事项 。 

口 内 容 ” 盒 模型 内 容 决定 了 人 金 模 型 的 大 小 ， 

当 多 模型 中 不 存在 内 容 时 ， 即 使 用 户 定义 
了 例子 大 小 ， 实 际 也 不 会 显示 念 模型 。 

口 边框 ”可 以 将 念 模 型 的 边框 设置 为 隐藏 

状态 。 

口 属性 值 在 设置 金 模 型 的 属性 时 ， 其 填充 

和 边界 值 不 可 以 为 负数 。 

口 内 联 元 素 在 定义 内 联 元 素 的 上 、 下 边界 
时 ， 其 属性 值 不 会 影响 到 行 高 。 

口 块 级 元 素 ， 对 于 未 浮动 的 块 级 元 素 ， 其 重 
直 相 邻 元 素 的 上 、 下 边界 值 会 出 现 登 加 现 
象 ， 系 统 会 依 边 界 值 最 大 的 一 个 边界 来 设 
定 元 素 间 的 实际 边 距 值 。 

口 浮动 元 素 ”对 于 浮动 元 素来 讲 ， 其 相 邻 
元 素 的 上 、 下 边界 值 不 会 出 现 登 加 的 





现象 。 
15.2.2 ”设置 盒 模型 属性 


盒 模型 属性 决定 了 盒 模型 的 整体 布局 , 用 户 可 
通过 设置 其 属性 值 的 方法 ,来 调整 盒 模型 。 
1. 设置 内 容 (content) 属性 

CSS 样式 表 人 允许 用 户 定义 盒 模型 中 的 内 容 
(content) 属性 .包括 宽度 、 高 度 、 最 大 宽度 、 最 
大 高 度 等 属性 。 






























可 以 定义 内 容 区 域 的 宽度 
可 以 定义 内 容 区 域 的 高 度 
可 以 定义 内 容 区 域 的 最 小 宽度 
可 以 定义 内 容 区 域 的 最 大 宽度 
可 以 定义 内 容 区 域 的 最 小 高 度 
可 以 定义 内 容 区 域 的 最 大 高 度 














上 述 表 格 中 的 各 属性 的 属性 值 均 为 关键 帧 
auto 或 长 度 值 ， 而 auto 为 所 有 属性 的 默认 属性 值 。 

在 CSS 中 . width 和 height 指 的 是 内 容 区 域 的 
宽度 和 高 度 。 增 加 内 边 距 、 边 框 和 外 边 距 不 会 影响 
内 容 区 域 的 尺寸 ， 但 是 会 增加 元 素 框 的 总 尺寸 。 

假设 框 的 每 个 边 上 有 10px 的 外 边 距 和 5px 的 
内 边 距 ， 如果 这 个 元 素 框 达 到 100px， 就 需要 将 内 
容 的 宽度 设置 为 70px。 

#box{ 

width:70px; 

margin:10px; 

padding:S5px; 





margin: 10px 


padding: 5px 











例如 ， 定 义 网 页 标签 的 宽度 在 100 一 200px 之 
间 , 则 可 以 使 用 内 容 区 域 的 最 大 宽度 和 最 小 宽度 属 
性 .其 代码 如 下 所 述 。 





min-widht:100px; 
max—-widht:200px; 
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2. 设置 填充 (padding) 属性 

填充 (padding) 属性 是 网 页 标签 边框 线 内 部 
的 一 种 扩展 区 域 . 主要 用 于 显示 网 页 标签 内 容 和 边 
框 之 间 的 距离 。 

在 CSS 样式 表 中 ， 用 户 可 以 通过 下 表 中 的 5 








种 属性 来 定义 网 页 标签 的 填充 尺寸 。 
属 “性 作 用 

定义 网 页 标签 4 个 方向 的 填充 
padding Re 
padding-top 定义 网 页 标签 顶部 的 填充 尺寸 
padding-right 定义 网 页 标签 右 侧 的 填充 尺寸 
padding-bottom | 定义 网 页 标签 底部 的 填充 尺寸 
padding-left 定义 网 页 标签 左 侧 的 填充 尺寸 





上 表 内 各 属性 的 属性 值 均 表示 填充 尺寸 的 长 
度 值 , 其 padding 属性 可 以 使 用 1~4 个 长 度 值 作为 
属性 值 。 

当 padding 属性 值 为 一 个 独立 的 长 度 值 时 , 表 
示 所 有 4 个 方向 的 填充 尺寸 均 为 该 长 度 值 。 例 如 ， 
定义 某 个 标签 4 个 方向 的 填充 尺寸 为 20px， 其 代 
码 如 下 所 述 。 





padding:20px; 


当 padding 属性 值 是 以 空格 隔 开 的 两 个 长 度 值 
时 ， 则 第 1 个 长 度 值 表示 项 部 和 底部 的 填充 尺寸 ， 
第 2 个 长 度 值 表示 左 侧 和 右 侧 的 填充 尺寸 。 例 如 ， 
定义 某 个 标签 项 部 和 底部 填充 尺寸 为 20px、 左 侧 
和 右 侧 的 填充 尺寸 为 15px， 其 代码 如 下 所 述 。 





padding:20px 15px; 


当 padding 属性 值 是 以 空格 隔 开 的 三 个 长 度 值 
时 . 则 第 1 个 长 度 值 表示 项 部 的 填充 尺寸 . 第 2 个 
长 度 值 表示 左 侧 和 右 侧 的 填充 尺寸 . 第 3 个 长 度 值 
表示 底部 的 填充 尺寸 . 例如 , 定义 某 个 标签 项 部 填 
充 尺寸 为 20px、 左 侧 和 右 侧 的 填充 尺寸 为 15px、 
底部 的 填充 尺寸 为 Opx， 其 代码 如 下 所 述 。 





padding:20px 15px Opx; 


当 padding 属性 值 是 以 空格 隔 开 的 4 个 长 度 值 
时 , 则 分 别 表 示 网 页 标签 的 项 部 、 右 侧 、 底 部 和 左 
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侧 4 个 方向 的 填充 尺寸 . 例如 . 定义 某 个 网 页 标签 
项 部 填充 尺寸 为 30px、 底 部 填充 尺寸 为 20px、 左 
侧 填充 尺寸 为 15px、 右 侧 的 填充 尺寸 为 15px， 其 
代码 如 下 所 述 。 


padding:30px 20px 15px 15px; 


3. 设置 边框 (border) 属性 
边框 (border) 属性 主要 用 于 区 分 内 边框 和 外 
边 距 ， 其 外 边 表 示 元 素 的 最 外 围 。 
在 CSS 样式 表 中 ， 用户 可 以 通过 下 表 中 的 三 
种 属性 来 定义 网 页 标签 的 边框 属性 。 











border-style 定义 边框 的 样式 


定义 边框 的 宽度 
定义 边框 的 颜色 


border-color 





边框 (border) 属性 中 的 各 属性 组 值 也 需要 使 
用 空格 进行 隔 开 . 分 别 表示 边框 样式 、 边框 宽度 和 
边框 样式 。 例 如 , 定义 某 个 网 页 标签 边框 的 样式 为 
实 线 、 边 框 宽度 为 10px、 边 框 颜色 为 红色 时 ， 其 
代码 如 下 所 述 。 








border:solid 10px #F51216; 


4. 设置 补 白 属性 

补 白 是 网 页 标签 边框 线 外 部 的 一 种 扩展 区 域 ， 
它 可 以 使 网 页 标签 与 其 父 标签 和 其 他 同 级 标签 拉 
开 距 离 ， 从 而 实现 各 种 复杂 的 布局 效果 。 








CSS 样式 表 提 供 了 下 表 所 示 的 5 种 补 
用 于 定义 网 页 标签 的 补 白 尺 寸 。 





属性 ， 


















定义 网 页 标签 4 个 方向 的 补 白 













pe 尺寸 
margin-top 定义 网 页 标签 顶部 的 补 白 尺寸 
marginright ”| 定义 网 页 标签 右 全 的 补 白 尺寸 





定义 网 页 标签 底部 的 补 白 尺 十 
定义 网 页 标签 左 侧 的 补 白 尺寸 





上 表 中 5 种 补 白 属性 的 属性 值 都 与 填充 属性 
相同 . 均 为 补 白 尺寸 的 长 度 值 。 其 中 . margin 属性 
可 以 使 用 1 一 4 个 长 度 值 作为 属性 值 。 








当 margin 属性 值 为 一 个 独立 长 度 值 时 .表示 4 
个 方向 的 补 白 尺寸 均 为 该 长 度 值 。 例如 , 定义 某 个 
标签 在 4 个 方向 的 填充 尺寸 均 为 20px 时 ， 其 代码 
如 下 所 述 。 


margin:20px; 





当 margin 属性 值 是 以 空格 隔 开 的 两 个 长 度 值 
时 ， 则 第 1 个 长 度 值 表示 项 部 和 底部 的 补 白 尺 寸 , 
第 2 个 长 度 值 表示 左 侧 和 右 侧 的 补 白 尺寸 。 例 如 . 
定义 某 个 标签 项 部 和 底部 补 白 尺寸 为 30px、 左 侧 
和 右 侧 的 补 白 尺寸 为 20px 时 ， 其 代码 如 下 所 述 。 





margin:30px 20px; 


当 margin 属性 值 是 以 空格 隔 开 的 三 个 长 度 值 
时 , 则 分 别 表示 项 部 、 左 侧 和 右 侧 、 底 部 的 补 白 尺 
寸 。 例 如 ， 定 义 某 个 标签 项 部 补 白 尺寸 为 25px、 
左 侧 和 右 侧 的 补 白 尺 寸 为 20px、 底 部 的 补 白 尺 十 
为 30px 时 ， 其 代码 如 下 所 述 。 


margin:25px 20px 30px; 


当 padding 属性 值 是 以 空格 隔 开 的 4 个 长 度 值 
时 , 则 分 别 表示 项 部 、 右 侧 、 底 部 和 左 侧 的 补 白 尺 
寸 。 例 如 ， 定义 某 个 网 页 标签 的 顶部 补 白 尺 寸 为 
30px、 右 侧 的 补 白 尺寸 为 25px、 底 部 的 补 白 尺 十 
为 20px、 左 侧 的 补 白 尺寸 为 10px 时 ， 其 代码 如 下 
所 述 。 

















margin:30px 25px 20px 10px7 
15.2.3 CSS 3.0 新 增 盒 模型 属性 


CSS 3.0 新 增 了 弹性 盒 模型 ， 主 要 用 于 控制 网 
页 元 素 在 盒 模 型 中 的 布局 方式 和 可 用 空间 的 处 理 
方式 , 以 帮助 用 户 设计 出 适应 各 种 浏览 器 窗口 的 网 
页 布局 样式 。 其 中 , 新 增 的 弹性 盒 模型 中 包括 6 个 
盒 模型 属性 ， 每 种 属性 的 具体 说 明 如 下 所 述 。 
1. 取向 属性 

取向 是 指 盒子 内 部 各 元 素 的 横 排 或 竖 排 两 种 
流动 布局 方向 ,而 取向 属性 主要 通过 box-orient 属 
性 进行 控制 。 

在 CSS 样式 表 中 .用户 可 以 通过 下 表 所 示 的 5 
种 属性 值 来 定义 盒子 取向 属性 。 



























在 一 条 水 平 线 上 从 左 到 右 显示 盒子 
元 素 的 子 元 素 

在 一 条 处 置 线 上 从 上 到 下 显示 金子 
元 素 的 子 元 素 

沿 着 内 联 轴 显示 盒子 元 素 的 子 元 素 
沿 着 块 轴 显 示 念 子 元 素 的 子 元 素 
盒子 元 素 继承 父 元 素 的 相关 属性 














2. 顺序 属性 
顺序 属性 主要 用 来 控制 盒子 元 素 的 排列 顺序 . 





可 以 通过 box-direction 属性 进行 控制 。 而 在 CSS 
样式 表 中 ., 用 户 可 以 通过 下 表 所 示 的 三 种 属性 值 来 
定义 盒子 顺序 属性 。 


定义 金子 元 素 的 排列 顺序 为 正常 顺序 


定义 与 normal 相反 的 显示 顺序 
定义 继承 上 级 元 素 的 显示 顺序 





3. 位 置 属性 

位 置 属性 主要 用 来 控制 盒子 元 素 的 具体 显示 
位 置 ， 可 以 通过 box-ordinal-group 属性 进行 控制 。 
box-ordinal-group 属性 的 语法 格式 如 下 所 述 。 


box-ordinal-group:<integer> 


在 CSS 样式 表 中 ， 用 户 可 以 通过 integer 属性 
值 来 定义 盒子 的 位 置 属性 。 其中, integer 属性 值 代 
表 一 个 从 1 开始 的 自然 数 , 主要 用 来 设置 元 素 的 位 
置 序号 。 

一 般 情况 下 ， 子 元 素 会 根据 integer 属性 值 从 
大 到 小 进行 排列 。 而 当 系 统 不 确定 属性 值 时 , 则 会 
将 其 属性 值 默认 为 1, 相同 序号 的 元 素 会 按照 文档 
加 载 的 顺序 进行 排列 。 
4. 弹性 空间 属性 

弹性 空间 属性 主要 用 于 控制 子 元 素 在 盒子 中 
的 宽度 . 高 度 及 子 元 素 所 在 栏目 的 宽度 等 一 些 子 元 
素 的 显示 空间 , 用 户 可 以 通过 box-flex 属性 进行 控 
制 。box-flex 属性 的 语法 格式 如 下 所 述 。 

















box-flex:<number> 


在 CSS 样式 表 中 . 用 户 可 以 通过 number 属性 
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值 来 定义 盒子 的 弹性 空间 属性 ， 而 number 属性 值 
则 表示 一 个 整数 或 小 数 。 当 用 户 为 盒子 中 多 个 
box-flex 属性 定义 属性 值 之 后 ， 浏 览 器 会 自动 计算 
box-flex 属性 值 的 总 值 ， 并 根据 每 个 box-flex 属性 
值 占 总 值 的 比例 来 分 配 盒子 的 剩余 空间 。 
5. 空间 管理 属性 
空间 管理 属性 主要 用 于 控制 盒子 空间 的 分 配 
情况 , 以 防止 同时 使 用 弹性 元 素 和 非 弹性 元 素 进行 
混合 排版 所 出 现 的 盒子 空间 分 配 不 均 的 情况 , 用 户 
可 通过 box-pack 和 box-align 属性 来 管理 空间 属性 。 
中 .box-pack 属性 可 通过 下 表 所 示 的 4 种 属 






































性 值 ， 来 控制 盒子 空间 管理 属性 。 






定义 所 有 子 容器 分 布 在 父 容 器 的 左 
侧 ， 右 侧 留 空 
定义 所 有 子 容器 分 布 在 父 容器 的 右 
侧 ， 左 侧 留 空 
定义 所 有 子 容 器 平均 分 布 ， 为 默认 值 
定义 平均 分 配 父 容器 的 剩余 空间 







Start 






end 
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而 box-align 属性 主要 用 于 控制 子 容器 在 竖 轴 
上 的 空间 分 配 情况 . 可 通过 下 表 所 示 的 5 种 属性 组 
进行 控制 。 













定义 子 容器 从 父 容 器 的 顶端 开始 排列 
定义 子 容器 从 父 容器 的 底 端 开始 排列 
定义 子 容器 横向 居中 排列 

定义 所 有 例子 沿 着 基线 开始 排列 
定义 所 有 子 容器 和 父 容器 保持 同一 高 度 





end 





center 
baseline 
stretch 











6. 空间 溢出 管理 属性 
在 网 页 设计 过 程 中 , 经 常 


会 出 现 盒 子 中 的 元 素 
出 现 空间 溢出 的 情况 。 此 时 ， 用 户 可 以 通过 
box-lines 属性 避免 溢出 现象 ， 而 box-lines 属性 则 
可 以 通过 下 列 两 种 属性 值 进行 控制 。 








口 single 定义 子 元 素 全 部 单行 或 单列 显示 。 
口 multiple 定义 子 元 素 全 部 多 行 或 多 列 
显示 。 


15.3 


CSS 布局 方式 是 一 种 比较 新 的 排版 理念 它 主 
要 通过 <div> 标 签 对 网 页 进行 分 块 ， 并 通过 CSS 样 
式 表 对 块 进行 定位 ， 用 户 只 需 修改 CSS 属性 便 可 








以 修改 网 页 布局 样式 。 
15.3.1 流动 布局 


流动 布局 是 将 网 页 中 各 种 布局 元 素 按 照 其 在 
HTML 代码 中 的 顺序 , 以 类 似 水 从 上 到 下 的 流 志 
样 依次 显示 。 

在 流动 布局 的 网 页 中 . 用 户 无 需 设置 网 页 各 种 
布局 元 素 的 补 白 属性 。 

例如 ， 一 个 典型 的 HIML 网 页 ， 其 <body> 标 
签 中 通常 包括 头 部 、 导 航 条 、 主题 内 容 和 版 尾 4 个 
部 分 , 使 用 div 标签 建立 这 4 个 部 分 的 层 后 . 其 代 
码 如 下 所 述 。 











<div id="header"></div> 





<!-- 网 页 头 部 的 标签 。 这 部 分 主要 包含 网 页 
的 logo 和 banner 等 内 容 --> 

<div id="navigator"></div> 

<! 一 网 页 导航 的 标签 。 这 部 分 主要 包含 网 页 的 
导航 条 -> 

<div id="content"></div> 

<!-- 网 页 主题 部 分 的 标签 。 这 部 分 主要 包含 
网 页 的 各 种 版 块 栏目 --> 

<div id="footer"></div> 

<!-- 网 页 版 尾 的 标签 。 这 部 分 主要 包含 尾部 
导航 条 和 版 权 信 息 等 内 容 --> 


在 上 面 的 HIML 网 页 中 ,用户 只 需 定义 
<body> 标 签 的 宽度 .外 补丁 .然后 根据 网 页 的 设计 ， 
来 定义 各 种 布局 元 素 的 高 度 . 即 可 实现 各 种 上 下 布 
局 或 上 中 下 布局 。 

例如 . 定义 网 页 的 头 部 高 度 为 100px、 导 航 条 
高 度 为 30px、 主 题 部 分 高 度 为 500px、 版 尾部 分 高 








度 为 50px， 其 代码 如 下 所 述 。 


body { 

width:1003px; 

margin:0px 

}// 定 义 网 页 的 body 标签 宽度 和 补 白 属性 
#header {height:100px;} 
// 定 义 网 页 头 部 的 高 度 
#navigator {height:30px;} 
// 定 义 网 页 导航 条 的 高 度 
#content {height:50px;} 
// 定 义 主题 内 容 部 分 的 高 度 
#footer {height:50px;} 

// 定 义 网 页 版 尾部 分 的 高 度 


另外 , 为 了 方便 查看 其 布局 效果 . 用 户 可 在 不 
同 的 定义 中 添加 边框 样式 。 





navigator 

















流动 布局 的 方式 特点 是 结构 简单 、 兼 容 性 好 . 
所 有 的 网 页 浏览 器 对 流动 布局 方式 的 支持 都 是 相 
同 的 ,不 需要 单独 为 某 个 浏览 器 编写 样式 。 





在 【效果 控件 〗 耐 板 中 ， 用户 可 以 通过 拖 动 各 


个 视频 效果 来 实现 调整 其 排列 顺序 的 目的 。 





虽然 . 流动 布局 无 法 实现 左右 分 栏 的 样式 . 所 
以 只 能 制作 上 下 布局 或 上 中 下 布局 ,具有 一 定 的 应 
用 局 限 性 。 
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15.3.2 浮动 布局 

浮动 布局 是 将 所 有 的 网 页 标签 设置 为 块 状 标 
签 的 显示 方式 . 然后 再 进行 浮动 处 理 。 最 后 . 通过 
定义 网 页 标签 的 补 白 属性 来 实现 布局 。 

浮动 布局 可 以 将 各 种 网 页 标签 紧密 地 分 布 在 
页 面 中 ,不 留 空隙 ， 同 时 还 支持 左右 分 栏 等 样式 ， 
是 目前 最 主要 的 布局 手段 。 

在 使 用 浮动 布局 方式 时 . 用 户 需要 先 将 网 页 标 
签 设置 为 块 状 显 示 。 即 设置 其 display 属性 的 值 
block。 然 后 ,还 需要 使 用 float 属性 ， 定 义 标签 的 

float 属性 是 定义 网 页 布局 标签 在 脱离 网 页 的 
流动 布局 结构 后 ， 所 显示 的 方向 。 

在 网 页 设计 中 主要 可 应 用 于 两 个 方面 , 即 实现 
文本 环绕 图 像 或 实现 浮动 的 块 状 标签 布局 。float 
属性 主要 包括 下 表 中 的 4 个 关键 字 属性 值 。 




















定义 网 页 标签 以 右 侧 浮动 的 方式 脱离 
流动 布局 
定义 网 页 标签 继承 其 父 标签 的 浮动 








float 属性 通常 和 display 属性 结合 使 用 ， 先 使 
用 display 属性 定义 网 页 布局 标签 以 块 状 方式 显 
示 。 再 使 用 float 属性 定义 左右 浮动 ， 其 代码 如 下 
所 述 。 





display:block; 

float:left; 

在 默认 状态 下 . 块 状 的 div 布局 标签 在 网 页 中 
会 以 上 下 流动 的 方式 显示 。 























所 有 网 页 浏览 器 都 支持 float 属性 , 但 是 inherit 
属性 值 只 有 非 Intermet Explorer 浏览 器 才 支 持 。 





在 将 布局 标签 设置 为 块 显示 方式 .并 定义 其 尺 
十 后 ,这 些 标签 仍然 会 以 流动 的 方式 显示 。 























在 为 【网 页 左 侧 栏 标签 和 【网 页 右 侧 栏 标 签 ] 
两 个 标签 定义 浮动 属性 后 ， 即 可 使 其 左右 分 列 




















在 上 图 的 布局 中 ， 左 侧 栏 标签 的 CSS 样式 代 
码 如 下 所 述 。 


display:block; 
float:left; 

width:150px; 

height:60px; 
line-height:60px; 
background-color:#C8C2C2; 


右 侧 栏 标签 的 CSS 样式 代码 如 下 所 述 。 


display:block; 
float:left; 
width:1350px; 
height:60px; 
line-height:60px; 


background-color: #D56466; 


15.3.3 ”绝对 定位 布局 


绝对 定位 布局 为 每 一 个 网 页 标签 进行 定义 . 精 





确 地 设置 标签 在 页 ee 
绝对 定位 使 元 素 的 位 置 与 文档 流 无 关 , 因此 不 
占据 空间 。 这 一 点 与 相对 定位 不 同 . 相对 定位 实际 
上 被 看 成 普通 流 定位 模型 的 一 部 分 , 因为 元 素 的 位 
置 是 相对 于 它 在 普通 流 中 的 位 置 。 
普通 流 中 其 他 元 素 的 布局 就 像 绝对 定位 的 元 
素 不 存在 一 样 。 

















#box-relative{ 
position:absolute; 
left:30px; 
top:20px 





绝对 定位 的 元 素 的 位 置 相 对 于 最 近 的 已 定位 





祖先 元 素 ( 父 元 素 ) ， 如 果 元 素 没 有 已 定位 的 祖先 
元 素 ( 父 元 素 )， 那么 它 的 位 置 相 对 于 最 初 的 包 
含 块 。 


对 于 定位 的 主要 问题 是 要 记 住 每 种 定位 的 意 
义 。 其 中 ,相对 定位 是 “相对 于 ”元 素 在 文档 中 的 
初始 位 置 ,而 绝对 定位 是 “相对 于 ”最 近 的 已 定位 
祖先 元 素 ( 父 元 素 )， 如 果 不 存在 已 定位 的 祖先 元 
素 ( 父 元 素 )， 那 么 “相对 于 ”最 初 的 包含 块 。 

- 设置 精确 位 置 

设置 网 页 标签 的 精确 位 置 ， 可 使 用 CSS 样式 
表 中 的 position 属性 先 定义 标签 的 性 质 。 
属性 的 作用 是 定义 网 页 标签 














的 定位 方 


position 属 


式 . 其 属性 值 为 下 表 所 示 的 4 个 关键 字 。 






默认 值 , 无 特殊 定位 ,遵循 网 页 布局 标 
绝对 定位 方式 ,定义 网 页 标签 按照 left、 
top、bottom 和 right 4 种 属性 定位 


















定义 网 页 布局 标签 按照 left、top、bottom 











relative 和 right 4 种 属性 定位 ， 但 不 允许 发 生 
必 登 ， 即 忽视 z-index 属性 设置 
修改 的 绝对 定位 方式 ， 其 定位 方式 与 
absolute 类 似 ， 但 需要 遵循 一 些 规范 ， 

fixed 例如 position 属性 的 定位 是 相对 于 body 


标签 的 ，fixed 属性 的 定位 则 是 相对 于 
html 标签 的 


将 网 页 布局 标签 的 position 属性 值 设 置 为 
relative 后 ， 可 以 通过 设置 左 侧 、 顶 部 、 底 部 和 右 
侧 4 个 CSS 属性 ,定义 网 页 标签 在 网 页 中 的 偏 移 
a 

而 这 种 设置 结果 与 通过 margin 属性 定义 网 页 
布局 标签 的 补 白 类 似 , 都 可 以 实现 网 页 布局 的 相对 
定位 。 

将 网 页 布 
absolute 之 后 ,会 将 
动 布局 中 脱离 出 来 。 

此 时 , 用户 必须 最 少 定义 其 左 侧 、 上 方 、 右 侧 
和 下 方 4 种 针对 <body> 标 签 的 距离 属性 中 的 一 种 ， 
来 实现 其 定位 ,否则 position 的 属性 值 将 不 起 作用 
(通常 需要 定义 项 部 和 左 侧 ) 。 

例如 ， 定 义 网 页 布局 标签 距离 网 页 顶部 为 
100px、 左 侧 为 30px， 其 代码 如 下 所 述 。 





局 标签 的 position 属性 定义 为 
从 网 页 当前 的 流动 布局 或 浮 























position:absolute; 
top:100px; 
LaF SOxy 


属性 为 absolute 对 象 的 z-index 属性 可 以 设置 
层 登 显示 的 次 序 ， 它 是 直接 有 效 的 ; 而 属性 


值 为 relative 对 象 的 z-index 属性 在 设置 时 需 
要 注意 ， 把 当前 对 象 的 z-index 设置 为 0 以 
上 ， 否 则 在 firefox 中 它 无 法 显示 。 








属性 中 的 fixed 属性 值 是 一 种 特殊 的 





position 
属性 值 。 
在 网 页 设计 过 程 中 . 绝 大 多 数 的 网 页 布局 标签 
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定位 (包括 绝对 定位 ) 都 是 针对 网 页 中 的 <body> 
标签 。 而 fixed 属性 值 所 定义 的 网 页 布局 标签 则 是 
针对 <html> 标 签 . 所 以 可 以 设置 网 页 标签 在 页 面 中 
2. 设置 层 又 次 序 

使 用 CSS 样式 表 ， 除 了 可 以 精确 地 设置 网 页 
标签 的 位 置 之 外 . 还 可 以 设置 网 页 标签 的 层 翅 顺 
序 。 首先 . 需要 通过 CSS 样式 表 中 的 position 属性 
定义 网 页 标签 的 绝对 定位 ， 然 后 再 使 用 CSS 样式 
表 的 z-index 属性 。 

在 层 苔 后 ， 将 按照 用 户 定义 的 z-index 属性 决 
定 层 夫 位置, 或 自动 按照 其 代码 在 网 页 中 出 现 的 顺 
序 依次 层 琶 显示 。z-index 属性 的 值 为 0 或 任意 正 
整数 .无 单位 。z-index 属性 值 越 大 ， 则 网 页 布局 
标签 的 顺序 越 高 。 

例如 , 两 个 id 分 别 为 divl 和 div2 的 
divl 覆盖 在 div2 上 方 ， 则 代码 如 下 所 述 。 
































省 


#divl { 
position:absolute; 
z-index:2; 

} 

#div2 { 
position:absolute; 
z-index:1; 


| 
3. 可 视 化 布局 


可 视 化 布局 是 指 通过 CSS 样式 表 ， 来 定义 各 
种 布局 标签 在 网 页 中 的 显示 情况 。 

在 CSS 样式 表 中 ， 人 允许 用 户 使 用 visibility 属 
性 , 定义 网 页 布局 标签 的 可 视 化 性 能 。 该 属性 包括 
下 表 所 示 的 4 种 关键 字 属性 值 。 









默认 值 ， 定 义 网 页 布局 标签 可 见 
定义 网 页 布局 标签 隐藏 

定义 表格 的 行 或 列 隐藏 ， 但 可 被 脚本 
程序 调用 

从 父 网 页 布局 标签 中 继承 可 视 化 方式 





hidden 





collapse 





在 visibility 属性 中 ， 





用 户 可 以 方便 地 通过 








注 三 网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 ::: 


作 与 网 站 组 建 {CC 2015 中 文 版 ) 从 新 手 到 高 手 








Visible 和 hidden 属性 值 切换 网 页 布局 标签 的 可 视 
化 性 能 ， 使 其 显示 或 隐藏。 
用 户 在 设置 visibility 属性 与 display 属性 时 . 
有 一 定 的 区 别 。 如 设置 display 属性 的 值 为 none 之 
后 . 被 隐藏 的 网 页 布局 标签 往往 不 会 在 网 页 中 再 占 
据 相 应 的 空间 。 通过 设置 visibility 属性 定义 hidden 
的 网 页 布局 标签 . 则 会 保留 其 占据 的 空间 . 除非 将 
其 设置 为 绝对 定位 。 
4. 布局 剪 切 

在 CSS 样式 表 中 ， 还 提供 了 一 种 可 剪 切 绝对 
定位 布局 标签 的 工具 , 将 所 有 位 于 显示 区 域外 的 部 
分 剪 切 掉 ， 使 其 无 法 在 网 页 中 显示 。 

在 剪 切 绝对 定位 的 标签 时 ， 需 要 使 用 CSS 样 
式 表 中 的 clip 属性 ， 其 属性 值 包括 和 矩形 、auto 和 
inherit 。 


auto 属性 值 是 clip 属性 的 默认 属性 值 , 其 作用 























为 不 对 网 页 布局 标签 进行 任何 剪 切 操作 . 或 剪 切 的 
和 矩形 与 网 页 布局 标签 的 大 小 和 位 置 相 同 。 

矩形 属性 值 与 颜色 、URL 类 似 ， 都 是 一 种 特 
殊 的 属性 值 对 象 。 在 定义 矩形 属性 值 时 , 需要 为 其 
使 用 rectO 方 法 ， 同时 将 矩形 与 网 页 的 4 条 边 之 间 
的 距离 作为 参数 . 填写 到 rect0 方 法 中 。 

例如 ， 定 义 一 个 距离 网 页 左 侧 20px、 顶 部 
45px、 右 侧 30px， 底 部 26px 的 矩形， 其 代码 如 下 
所 述 。 


rect (20px 45px 30px 26px) 


用 户 可 以 方便 地 将 上 述 代码 应 用 到 clip 属性 
中 . 以 绝对 定位 的 网 页 布局 标签 进行 剪 切 操作 , 其 
代码 如 下 所 述 。 








position:absolute; 
clip:rect (20px 45px 30px 26px); 


jG 站 练习 : 制作 企业 网 页 


企业 门户 网 站 作为 企业 的 网 上 名 片 ， 其 重要 性 毋庸 质疑 。 而 在 
制作 企业 网 页 时 , 则 有 许多 子 页 面 . 其 网 页 的 结构 和 框架 内 容 非常 类 
似 ， 用 户 可 以 通过 模板 来 快速 创建 其 他 页 面 。 在 本 练习 中 ， 将 运用 
Dreamweaver 中 的 模板 功能 ,制作 一 个 基于 模板 的 企业 产品 网 页 。 


用 各 2 
| 
EE | 
5 » pee 











TFN | PHAN | BR Fm | ES | Bs 


另存 为 模板 
基于 模板 创建 文档 
插入 表格 


该 套 表格 

插入 图 像 

设置 表格 属性 
创建 可 编辑 区 域 











操作 步骤 “》》》 
STEP|01 保存 为 模板 。 打 开 素 材 文件 . 执行 【 文 
件 】| 【另存 为 模板 】 命 令 ， 在 弹出 的 【另存 模板 】 





对 话 框 中 设置 模板 名 称 ， 单 击 【保存 】 按 钮 。 
STEP|02 将 光标 放置 在 网 页 的 右 侧 . 执行 【插入 】 
|【 模 板 】|【 可 编辑 区 域 】 命 令 ， 在 弹出 的 对 话 框 








STEPI03 基 





STEPI04 所 
域 , 执行 【插入 】| 【表格 】 命 令 ， 在 弹出 的 【 表 


中 设置 名 称 ， 并 单 击 【确定 】 按 钮 。 




















作 网 页 内 容 。 将 光标 定位 在 可 编辑 区 





格 】 对 话 框 q 





设置 表格 尺寸 ， 单 击 【 确 定 】 按 钮 。 





边框 站 经: 0 你 素 
单元 格 边 下 :0 ”| 图 
单元 格 问 下 0 ] 加 











于 模板 创建 文件 。 执 行 【 文 件 】|【 新 
建 】 命 令 , 选择 【产品 内 容 】 选 项 , 并 单 击 【创建 】 
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STEP|05 将 光标 放置 在 该 表格 的 第 1 列 中 . 执行 
【插入 】|【 表 格 】 命 令 . 在 对 话 框 中 设置 表格 尺寸 。 











STEP|I06 选择 第 1 行 . 在 【属性 ] 面板 中 设置 [高 】 




















STEP|07 使 用 同样 的 方法 . 设置 其 他 行 的 高 度 值 . 
并 在 其 中 插入 图 片 、 按 钮 或 嵌 套 表格 。 


TT DT / FT 








Rr Pre Pree Re Re 











STEP|08 在 第 2 列 中 插入 一 个 12 行 2 列 、 宽 度 
为 550 像素 的 表格 。 合 并 第 1 行 中 的 所 有 单元 格 ， 
设置 其 高 度 值 并 插入 相应 的 图 像 。 








网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 








pe 





FE 

















STEP|09 合并 第 2 行 中 的 所 有 单元 格 . 设置 其 高 
度 值 。 然 后 ， 切 换 到 【代码 〗 视 图 中 ,输入 
“background="images/productl4.jpg" 。 使 用 同样 的 








;网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 : 





方法 . 分 别 合并 其 他 相应 单元 格 . 并 插入 相应 的 图 


片 及 输入 内 容 文本 。 





jmages/produet14. jpe" 








td 
=images/procuct11.jpg" wi 
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<td>énbsp; </td> 


"a0" colspan=" 
"height="40" 












9 练习: 制作 家 居 网 页 


网 页 的 色调 与 布局 是 决定 网 站 美观 性 的 主要 








因 








一 般 都 是 以 暖色 调 为 主 色调 来 布局 网 页 的 ,从 而 可 以 在 视觉 上 给 人 以 
舒适 和 自然 的 感觉 。 在 本 练习 中 . 将 使 用 绝对 定位 布局 来 制作 一 个 以 





棕 黄 色 为 主 色调 的 家 居 网 页 。 


DD 





STEP|01 设置 页 面 属性 。 新 建 空白 文档 . 单 击 【 属 
性 】 面 板 中 的 【页 面 】 属 性 按钮 .在 弹出 的 【页 面 
属性 】 对 话 框 中 , 设置 大 小 . 文本 颜色 和 背景 颜色 。 
STEP|02 打开 【链接 (CSS)】 选 项 卡 . 设置 各 种 
STEP|03 打开 【标题 /编码 】 选 项 卡 ， 在 【标题 】 
文本 框 中 输入 网 页 标题 ， 并 单 击 【 确 定 】 按 钮 。 




















素 ， 而 家 居 网 站 







CSS 浮动 定位 
CSS 绝对 定位 
使 用 无 序列 表 
应 用 float 属性 
创建 CSS 规则 
插入 Div 层 
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口 电 医 Unieode 签名 (p00) (S) 


La 
Te 手 \ 源 文件 MIVitsi 





文件 文件 于 
站 点 文件 








一 0 | .| 








STEP|04 插入 总 Div 层 , 执行 【插入 】|Div 命令 ， 
在 弹出 的 【插入 Div】 对 话 框 中 ,输入 ID 名 称 ， 
单 击 【新 建 CSS 规则 】 按 钮 。 


委 入 [在 颖 入 点 
Class: | 





STEP105 在 弹出 的 【新 建 CSS 规则 】 对 话 框 中 . 
单 击 【确定 】 按 钮 。 


选择 器 类 型 - 
为 css 扣 mis 扩 上 下 文 过关 器 典型 。 
加 《应用 于 一个 Im 元 素 ) 


eC 

















STEP|06 在 弹出 的 [#container 的 CSS 规则 定义 】 
对 话 框 中 ,打开 【背景 】 选 项 卡 . 设置 层 的 背景 填 
充 图 片 。 



































STEP|07 打开 【定位 】 选 项 卡 . 设置 层 的 高 度 、 
宽度 等 属性 值 ， 并 单 击 【 确 定 】 按 钮 。 





Visibility() 


Lt 








STEP|08 制作 主体 内 容 。 在 页 面 中 插入 一 个 名 为 
nav 的 Div 层 ， 并 定义 其 CSS 样式 。 











STEP|09 然后 . 单 击 【 属 性 】 面 板 中 的 【项 目 列 
表 】 按 钮 .插入 项 目 列表 并 输入 列表 内 容 。 
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STEP|10 在 网 页 中 插入 一 个 名 为 “main ”的 Div 
层 ， 并 定义 其 CSS 样式 。 


rercs-Tarpzxr 
top: 33px; 





a 
让 格 (后 关 浊 对 )</11> 
<ti> 
吉 市 风格 (者 立 个 性 )</t> 
1> 
清新 风格 (经 光 写 意 )c/t> 


</div> 





ontainer #nav ul li { 
display: inLine; 
padding-left: Spx; 





in 【 
position:absolute; = 
width:186px; 区 























ee STEP|14 然后 .在 项 目 列表 中 插入 相应 的 图 片 ， 
es 按 Enter 键 依次 插入 其 他 列表 图 片 。 








Ise I 
STEPI11 然后 ， 单 击 【 属 性 】 面 板 中 的 【项目 列 。 广 nt [LA 和 

5 <div 1d="nrtit"> 美 图 移 常 : 流行 时 尚 精 关 设计 </div> 
表 】 按 钮 , 插入 项 目 列表 并 输入 列表 内 容 , 并 定义 - 一 
其 CSS 样式 。 区 i >c1mg src="images/1.jpg" 


2cing src="images/2.jpg" width="15e" 








Ps dv drmain> ”| ~ Aing 
cul> 
28 <li><hs style="border-botton:#fce 1px dashed"> 下 ct>e1mg src="mages/4.jpg" width="1se" 
风格 分 类 





oninages/3. jpg" widthe"]se" 





</h5> 
</U> 


<l1> 
3 ”古典 风格 (豪华 富裕 ) </L1> 
6 U1> 

7 。 朴素 风 桔 ( 沪 必 所 欲 )</11> 


9 入 本 让 重 )</14> 二 3 co vv 
,Saw footer 的 Div 层 ， 并 定义 CSS 样式 。 


2 <t> 








< 
二 RMywp 十 昌 同 放 ma、 > 





STEP|12 在 网 页 中 插入 一 个 名 为 mrtit 的 Div 层 . 
定义 其 CSS 样式 ， 并 在 该 层 中 输入 文本 。 











STEP|16 然后 ， 在 该 Div 层 中 输入 版 尾 文本 ， 
成 整个 页 面 的 制作 。 




















STEP|13 在 页 面 中 插入 一 个 名 为 mainright 的 Div 
层 . 定义 其 CSS 样式 ， 并 单 击 【 属 性 】 面 板 中 的 
【项 目 列表 】 按 钮 。 











STEP|15 制作 版 尾 内 容 。 在 页 面 中 插入 一 个 名 为 














15.6 











练习 1: 制作 环境 保护 页 9 AY | | 议 | 
全 downloads\15\ 新 手 训练 营 环 境 保护 页 。 OFFEE y 
提示 : 本 练习 中 , 首先 新 建 空白 文档 ,关联 外 部 然后 .在 网 页 中 插入 一 个 主体 内 容 的 Div 层 , 在 





CSS 样式 表 文件 。 在 网 页 中 插入 一 个 Div 层 ， 关联 。 其 中 嵌入 三 个 并 列 Div 层 ， 分别 插入 图 像 ,文本 并 设 
Css 样式 . 并 在 其 中 嵌入 Div 层 . 用 以 显示 导航 图 片 。 置 文 本 的 链接 属性 , 
和 导航 文本 。 


然后 ， 在 网 页 中 插入 一 个 包含 所 有 主体 内 容 的 
Div 层 。 在 该 层 中 谱 套 两 个 Div 层 . 分别 关联 相对 应 


的 CSS 规则 , 并 在 不 同 的 层 中 插入 相应 的 图 片 . 并 输 
入 相应 的 文本 。 
































ATree. 





Save The Future. 


六 2 最 后 , 制作 网 页 的 版 尾部 分 。 在 网 页 中 插入 一 个 
mi | 














练习 3: 制作 经 典 三 列 布局 


最 后 ,在 网 页 中 插入 一 个 版 尾 Div 层 . 输入 相应 
文本 ， 并 添加 错 记 链 接 。 人 downloads\15\ 新 手 训练 营 \ 三 列 布局 


| - 提示 : 本 练习 中 . 首先 新 建 空白 文档 ， 关 联 外 部 
| 区 Css 样式 表 文件 。 在 网 页 中 插入 一 个 总 Div 层 , 并 在 
: 该 层 中 访 入 三 个 下 属 层 . 分 别 为 左 层 . 右 层 和 版 尾 层 。 
| ee 在 左 层 中 ,分 别 在 对 应 的 位 置 中 插入 图 片 、 表 单元 素 
| ee 和 项 目 列表 ， 并 设置 其 链接 属性 和 CSS 样式 。 然 后 . 
| > 加 在 右 层 中 嵌入 多 个 Div 层 , 分 别 制作 导航 栏 和 各 种 列 
| Se 表 栏 ， 并 为 层 元 素 设置 链接 属性 和 CSS 样式 。 最 后 
| : 在 版 尾 层 中 嵌入 一 个 Div 层 . 插入 项 目 列表 . 输入 列 
表 内 容 和 链接 属性 ， 以 及 版 本 信息 等 文本 。 














练习 2: 制作 咖啡 主页 





i mw EE ee 
售 downloads\15\ 新 手 训练 营 \ 咖 啡 主页 oa。 Mo Socessill es 
提示 : 本 练习 中 ， 首 先 新 建 空白 文档 ， 关 联 外 部 ee ee 








CSS 样式 表 文 件 。 在 网 页 中 插入 名 为 page 的 Div 层 . 
同时 在 其 中 赃 套 两 个 Div 层 . 插入 图 片 输入 文本 并 设 
置 文本 的 链接 属性 。 





























网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 




















练习 4: 制作 商品 展示 页 像 和 表单 元 素 . 为 图 像 和 表单 元 素 指定 CSS 规则 , 同 
提示 : 本 练习 中 .首先 新 建 空白 文档 关联 外 部 ee 


CSS 样式 表 文件 。 在 网 页 中 , 插入 谋 套 Div 层 . 插入 
图 像 和 表单 元 素 . 输入 标题 文本 来 制作 版 头 内 容 。 然 
后 , 插入 一 个 名 为 menu 的 层 . 指定 CSS 样式 . 输入 
文本 并 设置 文本 的 链接 属性 .用 以 显示 导航 栏 内 容 。 























入 文本 ,指定 CSS 样式 .并 设置 文本 的 字体 样式 。 














接着 ， 在 网 页 中 插入 contentwrap 层 ， 并 在 其 中 
散 套 多 个 Div 层 , 根据 设计 需求 在 不 同 的 层 中 插入 图 
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网 页 制作 与 网 站 组 建 CC 2015 中 文 版 ) 从 新 手 到 高 手 ::: 


为 了 丰富 网 页 内 容 , 使 网 页 新 颖 有 风格 , 设计 者 在 制作 网 页 时 通常 会 添加 各 种 特效 。 网 页 中 的 特效 
一 般 是 由 JavaScript 脚本 代码 完成 的 ， 对 于 没有 任何 编程 基础 的 设计 者 而 言 ， 可 以 使 用 Dreamweaver 中 
内 置 的 行为 。 行 为 丰富 了 网 页 的 交互 功能 . 它 允 许 访问 者 通过 与 页 面 的 交互 来 改变 网 页 内 容 . 或 者 让 网 
页 执行 某 个 动作 。 本 章 将 详细 介绍 行为 的 概念 ， 以 及 Dreamweaver 中 常用 内 置 行为 功能 的 使 用 方法 , 使 
用 户 能 够 在 网 页 中 添加 各 种 行为 以 实现 与 访问 者 的 交互 功能 。 
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注 三 网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 ::: 


由 作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 





网 页 行为 概述 








行为 是 用 来 动态 响应 用 户 操作 .改变 当前 页 面 
效果 或 者 执行 特定 任务 的 一 种 方法 . 可 以 使 访问 者 
与 网 页 之 间 产 生 一 种 交互 。 


16.1.1 什么 是 行为 


行为 是 由 某 个 事件 和 该 事件 所 触发 的 动作 组 
成 的 , 任何 一 个 动作 都 需要 一 个 事件 激活 , 两 者 是 
相辅相成 的 。 

Dreamweaver 行为 将 JavaScript 代码 放置 到 文 
档 中 ,这 样 访问 者 就 可 以 通过 多 种 方式 更 改 网 页 , 
或 者 启动 某 些 任务 。 行为 可 以 被 添加 到 各 种 网 页 元 
素 上 ,如 图 像 、 文 本 、 多 媒体 文件 等 ， 除 此 之 外 还 
可 以 被 添加 到 HIML 标签 中 。 
1. 事件 

事件 是 浏览 器 生成 的 消息 , 它 指示 该 页 的 访问 
者 已 执行 了 某 种 操作 。 不 同 的 页 面 元 素 定 义 了 不 同 
的 事件 。 例 如 ， 在 大 多 数 浏览 器 中 ，onMouseOver 
和 onClick 是 与 链接 关联 的 事件 ， 而 onLoad 是 与 
图 像 和 文档 的 body 部 分 关联 的 事件 。 

单个 事件 可 以 触发 多 个 不 同 的 动作 . 用 户 可 以 
指定 这 些 动作 发 生 的 顺序 。 
2. 动作 

动作 是 一 段 预先 编写 的 JavaScript 代码 ,可 用 
于 执行 诸如 打开 浏览 器 窗口 .显示 或 隐藏 AP 元 素 、 
播放 声音 或 停止 播放 Adobe Shockwave 影片 等 
任务 。 

当 行 为 添加 到 某 个 网 页 元 素 中 后 .每 当 该 元 素 
的 某 个 时 间 发 生 时 , 行为 就 会 调用 与 这 一 事件 关联 
的 动作 (JavaScript 代码 )。 例 如 ， 将 【弹出 消息 】 
动作 附加 到 一 个 链接 上 ， 并 制定 它 将 由 
onMouseOver 事件 触发 . 则 只 要 将 指针 放 在 该 链接 
上 ， 就 会 弹出 消息 。 

Dreamweaver 所 提供 的 动作 提供 了 最 大 程度 
的 跨 浏览 器 兼容 性 。 






































16.1.2 行为 面板 概述 

用 户 可 以 在 【行为 ] 面板 中 . 先 指定 一 个 动作 . 
然后 指定 触发 该 动作 的 事件 , 以 此 将 行为 添加 到 页 
面 中 。 

在 Dreamweaver 中 ,执行 【窗口 】| 【行为 】 
命令 ， 即 可 打开 【行为 】 面 板 。 

















在 【行为 】 面 板 中 , 除了 可 以 显示 当前 的 标签 
名 称 和 所 添加 的 行为 信息 之 外 . 还 提供 了 用 于 编辑 
网 页 行为 的 6 个 按钮 。 









显示 添加 到 当前 文档 中 
的 事件 
显示 所 有 添加 的 行为 事件 
单 击 刊 出 行为 菜单 ， 添 
加 行为 
从 当前 行为 表 中 删除 所 
先行 为 
动作 项 向 前 移 ， 改 变 执 
行 顺序 
动作 项 向 后 移 ， 改 变 执 
行 顺序 
























单 击 【 添 加 行为 】 按 钮 罗 后 ， 用 户 即 可 在 弹 
出 的 菜单 中 选择 相关 的 网 页 行为 ， 并 通过 设置 属 
性 . 将 其 添加 到 网 页 中 。 

而 在 【 按 下 】 下 方 的 列表 框 中 . 则 显示 了 当前 
标签 中 已 经 添加 的 所 有 行为 . 以 及 触发 这 些 行为 的 
事件 类 型 。 














对 于 网 页 中 已 存在 的 各 种 行为 . 可 以 在 列表 框 
中 选择 该 行为 ， 单 击 【 删 除 事件 】 按 钮 国 将 其 
删除 。 

如 网 页 中 存在 多 个 行为 .用 户 可 以 选择 某 个 行 
为 ,通过 单 击 【 增 加 事件 值 】 按 钮 图 | 或 【降低 事 








设置 文本 信息 行为 





:第 16 章 


网 页 行为 特效 





件 值 】〗 按 钮 国 | 来 调整 行为 的 顺序 ， 从 而 改变 这 些 
行为 在 网 页 中 的 执行 顺序 。 

除 此 之 外 . 用 户 还 可 以 通过 双击 行为 名 称 , 对 
行为 本 身 进行 编辑 . 或 者 单 击 触发 行为 的 事件 . 在 
弹出 的 列表 中 修改 事件 的 类 型 。 











通过 Dreamweaver 内 置 的 各 种 JavaScript 脚 
本 , 用 户 可 以 方便 地 添加 和 更 改 各 种 HTML 容器 、 
网 页 浏览 器 状态 栏 等 内 部 的 文本 信息 。 


16.2.1 设置 容器 文本 


容器 是 网 页 中 包含 内 容 的 标签 的 统称 . 典型 的 
容器 包括 各 种 定义 的 表格 、 层 、 框 架 、 段 落 等 
块 状 标签 。 

首先 ,在 网 页 中 插入 一 个 包含 CSS 样式 的 Div 
元 素 , 然后 选择 该 元 素 . 在 【行为 】 面板 中 单 击 【 添 
加 行为 】 按 钮 ， 在 弹出 的 菜单 中 选择 【设置 文本 】 
| 【设置 容器 的 文本 】 选 项 。 


























弹出 的 【设置 容器 的 文本 】 对 话 框 中 的 【容器 】 
选项 , 主要 用 于 设置 网 页 中 可 以 包含 文本 或 其 他 元 
素 的 任何 元 素 . 用 户 可 通过 单 击 下 拉 按钮 . 来 选择 
容器 。 而 【新 建 HIML】 选 项, 则 用 于 输入 在 容器 

















在 【设置 容器 的 文本 】 对 话 框 中 ， 用 户 可 以 


单 击 【容器 】〗 选 项 后 面 的 下 拉 按 钮 ， 在 其 下 
拉 列 表 中 选择 所 需 设置 的 容器 名 称 。 





设置 【容器 】 和 【新 建 HTML】 选 项 之 后 . 
单 击 【 确 定 】 按 钮 ， 即 可 创建 一 个 文本 信息 行为 。 
此 时 ， 在 【行为 】 面 板 中 将 显示 新 创建 的 行为 。 








此 时 ， 用户 可 通过 正 浏览 器 查看 网 页 中 的 内 
容 。 当 执行 该 文档 时 ,其 源 内 容 将 被 【新建 HTML 
文本 】 文 本 框 中 的 内 容 替 换 。 


360 安 全 济 响 加 7.1 > 又 件 吾 者 收 区 工具 帮助 名 
© © 全 日 file 


"|v 国 -. 点 ts3Q | 
Sm -全 RE 从 入 Br - WaR - 
D A * 





ET 





加 攻关 0% ”月 吉宗 


bi 局 2 


创建 S00 样式 表 


CE 而 


16:22 


六 i 雪 VT 巴 后 上 Qim% ; 
设置 文本 域 文字 

“文本 域 文字 ”行为 可 以 将 指定 的 内 容 蔡 换 表 
单 文本 域 中 的 内 容 。 


首先 . 在 网 页 中 插入 一 些 表单 元 素 . 例如 插入 
表单 、 文 本 和 密码 等 表单 元 素 。 











;网 页 制 (CC 2015 中 文 版 ) 从 新 手 到 高 手 








TN 
] 


EN NR PR RN NE 























然后 , 在 【行为 】 面 板 中 单 击 【 添 加 行为 】 按 
钮 ， 在 弹出 的 菜单 中 选择 【设置 文本 】〗】| 【设置 文 
本 域 文字 】 选 项 。 在 弹出 的 【设置 文本 域 文字 】 对 
话 框 中 , 单 击 【 文 本 域 】 选 项 下 拉 按 钮 . 设置 文本 
域 类 型 。 同时, 在 【新 建文 本 】 文 本 框 中 输入 所 显 
示 的 文本 内 容 ， 单 击 【 确 定 】 按 钮 即 可 。 





文本 域 ，|input “textfisld” v 


新 建文 本 。 [请 输入 注册 名 





在 【文本 域 ] 选项 的 下 拉 列 表 中 ， 将 显示 当 
前 页 面 中 所 有 的 文本 域 。 





此 时 ， 用户 可 通过 下 浏览 器 查看 网 页 中 的 内 
容 。 当 鼠标 移动 出 表单 时 , 可 以 看 到 在 【新 建文 本 】 
文本 框 中 所 输入 的 内 容 。 


360 安 全 浏览 器 7.1 > 又 件 可 者 收 襄 工具 天 由 是 
© © Hb fle/ 站 点 %20Z/Un 乡 |v 国 .二 LQ 
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16.2.3 ”设置 状态 栏 文本 

状态 栏 是 在 浏览 器 窗口 的 底部 . 用 于 显示 当前 

网 页 的 打开 状态 、 鼠 标 所 滑 过 的 网 页 对 象 URL 地 


址 等 情况 的 一 种 特殊 浏览 器 工具 栏 。 
在 Dreamweaver 中 ,选择 <body> 标 签 。 然 后 . 
单 击 【 行 为 】 面 板 中 的 【添加 行为 】 按 钮 .在 弹出 











的 菜单 中 选择 【设置 文本 】〗】| 【设置 状态 栏 文本 】 
选项 。 

在 弹出 的 【设置 状态 栏 文本 】 对 话 框 中 , 输入 
所 需 显示 的 文本 内 容 ， 并 单 击 【确定 】 按 钮 。 





消息 : | 创建 SCC 样 式 表 


sy ted 和 
用 广 首选 参数 来 痪 定 是 否 


























此 时 . 在 【行为 】 面 板 中 将 显示 新 创建 的 行为 
人 信息。 其中， 该 行为 的 默认 触发 事件 为 
onMouseOver， 为 保证 行为 的 正常 执行 ， 还 需要 选 
择 单 击 触发 事件 ， 在 其 列表 中 选择 onLoad 事件 。 











16.2.4 ”设置 框架 文本 


“设置 框架 文本 ”行为 主要 用 来 设置 网 页 框架 
结构 中 的 文本 、 显 示 和 内 容 。 

在 包含 框架 的 页 面 中 选择 某 个 对 象 . 单 击 【 行 
为 】 面 板 中 的 【添加 行为 】 按 钮 , 在 弹出 的 菜单 中 
选择 【设置 文本 】|【 设 置 框架 文本 】 选 项 。 然 后 ， 
在 弹出 的 【设置 框架 文本 】 对 话 框 中 设置 各 选项 ， 
单 击 【确定 】 按 钮 即 可 。 
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在 【设置 框架 文本 】 对 话 框 中 . 主要 包括 下 列 


4 种 选项 。 
口 框架 用 于 选择 用 于 显示 设置 文本 的 目 
口 新 建 HIML 
要 显示 的 内 容 。 


用 于 设置 在 选 定 框架 中 所 


设置 网 页 信息 行为 
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网 页 行为 特效 





口 获取 当前 HTML 单 击 该 按钮 , 可 以 复制 
目标 框架 的 body 部 分 的 当前 内 容 。 

口 保留 背景 色 启用 该 复 选 框 ,可 以 保留 原 
有 框架 中 的 背景 色 。 





Dreamweaver 为 用 户 内置 了 多 种 网 页 信息 行 
为 ,包括 常用 的 窗口 弹出 信息 、 打 开 浏 览 器 窗口 , 
以 及 交互 图 像 、 改 变 属性 、 跳 转 菜单 等 行为 。 


16.3.1 设置 窗口 信息 行为 


在 Dreamweaver 内 置 的 行为 中 ， 窗 口 信息 行 
为 主要 包括 弹出 信息 和 打开 浏览 器 窗口 两 种 窗口 
交互 行为 。 

















1. 弹出 信息 
“弹出 信息 ”行为 的 作用 是 显示 一 个 包含 指定 
文本 信息 的 消息 对 话 框 。 


一 般 信息 对 话 框 只 要 一 个 【确定 】 按 钮 ,所 以 
使 用 此 行为 可 以 强制 用 户 提供 信息 , 但 不 能 为 用 户 
提供 选择 操作 。 

在 Dreamweaver 中 ， 选 择 网 页 中 的 <body> 标 
签 。 单 击 【 行 为 】 面 板 中 的 【添加 行为 】 按 钮 ， 在 
弹出 的 菜单 中 选择 【弹出 信息 】 选 项 。 然 后 , 在 弹 
出 的 【弹出 信息 】 对 话 框 中 , 输入 信息 内 容 . 并 单 
击 【确定 】 按 钮 。 




















当 用 户 保存 网 页 并 在 浏览 器 中 打开 该 网 页 时 
系统 会 自动 弹出 消息 对 话 框 。 而 在 该 对 话 框 中 . 将 
会 显示 在 【弹出 信息 】 对 话 框 中 所 输入 的 内 容 。 
2. 打开 浏览 器 窗口 

在 Dreamweaver 中 ， 用 户 可 以 方便 地 为 网 页 


中 的 各 种 对 象 添加 打开 浏览 器 窗口 的 行为 。 
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首先 ， 选择 网 页 中 的 <body> 标 签 。 单 击 【 行 
为 】〗 面 板 中 的 【添加 行为 】 按 钮 ， 在 弹出 的 菜单 中 
选择 【打开 浏览 器 窗口 ] 选项 。 然后 , 在 弹出 的 【 扩 
开 浏 览 器 窗口 】 对 话 框 中 , 设置 各 项 选项 ,并 单 击 
【确定 】 按 钮 。 











要 显示 的 URL http: /fwww. baidu. con 
入 吕 袖 度 : [600 
局 性 思 号 航 工具 栏 
口 地 地 工具 栏 口 时 要 时 使 用 二 动 条 
回 杖 者 栏 口 测 束 大 小 手柄 
出 D 名 称 [百度 和 过 


国 口 高 度 : 400 
BE 





在 【打开 浏览 器 窗口 】 对 话 框 中 , 主要 包括 下 
表 中 的 一 些 选项 。 








用 于 输入 网 页 文档 的 URL 地 址 ， 
包括 文档 路 径 和 文件 名 ,或 者 单 
击 【浏览 〗】 按 钮 ， 选 择 网 页 文档 
以 像素 为 单位 指定 新 窗口 的 宽度 
以 像素 为 单位 指定 新 窗口 的 
高 度 
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启用 该 复 选 框 ， 可 在 浏览 器 上 显 
示 后 退 、 前 进 、 主 页 和 刷新 等 标 
准 按钮 的 工具 栏 


导航 工 
具 栏 





启用 该 复 选 框 ， 可 在 新 窗口 中 显 


革 半 本 中 守业 证 入 





地 址 工 
具 栏 


启用 该 复 选 框 ， 可 在 新 窗口 中 显 
示 地 址 栏 





席 识 


需要 时 
使 用 滚 
动 条 


状态 栏 


调整 大 
小 手 本 
窗口 名 称 


启用 该 复 选 框 ， 在 页 面 的 内 容 超 
过 窗口 大 小 时 ， 浏 览 器 会 自动 显 
示 滚 动 条 

启用 该 复 选 框 ， 可 在 新 窗口 底部 
显示 状态 栏 

启用 该 复 进 框 ， 可 以 显示 调整 窗 
口 大 小 的 手柄 

用 于 设置 新 窗口 的 名 称 








16.3.2 ”设置 图 像 信息 行为 


包括 交换 图 像 、 恢复 交 换 图 像 、 预先 载 入 图 像 
三 种 图 像 交 互 行为 。 
1. 交换 图 像 
Dreamweaver 行为 中 的 “交换 图 像 ”行为 比 鼠 
标 经 过 图 像 的 功能 更 加 强大 。 不 仅 能 够 制作 鼠标 经 
过 图 像 , 而 且 还 可 以 使 图 像 交换 的 行为 响应 任意 一 
种 网 页 浏览 器 支持 的 事件 , 包括 各 种 焦点 事件 、 键 
盘 事件 、 鼠 标 事件 等 。 
选择 页 面 中 的 图 像 , 单 击 【 行 为 ] 面板 中 的 【 添 
加 行为 】 按 钮 ， 在 弹出 的 菜单 中 选择 【交换 图 像 】 
选项 。 然 后 ,在 弹出 的 【交换 图 像 】 对 话 框 中 , 单 
击 【 设 定 原始 档 为 】 选 项 右 侧 的 【浏览 】 按 钮 。 


















































本 售 





议 主 原 如 和 ” 
回 预先 煌 入 轿 像 
回 5 克扣 人 














在 弹出 的 【选择 图 像 源 文件 】 对 话 框 中 选择 图 
像 文件 ， 并 单 击 【 确 定 】 按 钮 。 
































最 后 . 在 【交换 图 像 】 对 话 框 中 . 单 击 【 确 定 】 
按钮 即 可 。 
2. 恢复 交换 图 像 

“恢复 交换 图 像 ”行为 是 将 最 后 一 组 交换 的 图 
像 恢 复 为 未 交换 之 前 的 原状 态 . 它 只 能 在 应 用 “ 交 
换 图 像 ”行为 后 才 可 以 使 用 。 

在 【行为 】 面 板 中 ， 单 击 【添加 行为 】 按 钮 , 
在 弹出 的 菜单 中 选择 【恢复 交换 图 像 ] 选项 。 然后 ， 
在 弹出 的 【恢复 交换 图 像 】 对 话 框 中 , 单 击 【确定 】 
按钮 即 可 。 
























































3. 预先 载 入 图 像 

“预先 载 入 图 像 ”是 对 在 页 面 打开 之 处 不 会 立 
即 显 示 的 图 像 (例如 通过 行为 或 JavaScript 换 入 的 
图 像 ) 进行 缓存 ， 从 而 缩短 显示 时 间 。 

单 击 【行为 】 面 板 中 的 【添加 行为 】 按 钮 ,在 
弹出 的 菜单 中 选择 【预先 载 入 图 像 】 选 项 。 然 后， 
在 弹出 的 【预先 载 入 图 像 】 对 话 框 中 , 单 击 【浏览 
按钮 ,选择 需要 载 入 的 图 像 文 件 。 然 后 , 单 击 对 话 
框 中 的 【添加 项 】 按 钮 ,可 以 继续 添加 需要 预先 载 
入 的 图 像 文件 。 设置 完 所 有 选项 之 后 . 单 击 【确定 】 
按钮 即 可 。 
























































16.3.3 ”设置 跳 转 信息 行为 


在 Dreamweaver 内 置 的 行为 中 ， 跳 转 信息 行 
为 主要 包括 跳 转 菜单 、 跳 转 菜单 开始 、 转 到 URL 
三 种 图 像 交互 行为 。 
1. 跳 转 菜单 

“ 跳 转 菜单 ”是 链接 的 一 种 形式 ， 它 是 从 表单 
中 发 展 而 来 的 。 

首先 ,将 光标 定位 在 表单 域 中 ， 单 击 【 行 为 】 
面板 中 的 【添加 行为 】 按 钮 ,在 弹出 的 列表 中 选择 
【 跳 转 菜 单 】 选 项 。 然 后 ,在 弹出 的 【 跳 转 菜单 】 
对 话 框 中 ,设置 各 选项 ， 单 击 【 确 定 】〗 按 钮 即 可 。 


























回身 





可 单项 - 








文本 | 搜狐 游 戏 
选择 时 ， 转 到 URL: [http//gane. sohu. com 








打开 URL 于 : [主音 | 
口 更 改 URL 后 选择 第 一 个 项 目 





在 【 跳 转 菜单 】 对 话 框 中 , 主要 包括 下 列 一 些 

选项 。 

口 添加 项 单 击 该 按钮 ， 可 以 添加 菜单 项 ， 
以 继续 添加 其 余 菜 单项 。 

口 删除 项 ” 单 击 该 按钮 ， 可 以 删除 在 【菜单 
项 〗 列 表 框 中 已 选中 的 菜单 项 。 

口 在 列表 中 下 移 项 ”选择 【菜单 项 】〗 列 表 框 
中 的 菜单 项 ， 单 击 该 按钮 可 向 下 移动 该 选 
项 的 顺序 。 

口 在 列表 中 上 移 项 ”选择 【菜单 项 】 列 表 杠 
中 的 菜单 项 ， 单 击 该 按钮 可 向 上 移动 该 选 
项 的 顺序 。 

口 菜单 项 用 于 显示 所 添加 的 菜单 项 。 

口 文本 用 于 设置 菜单 项 中 所 显示 的 文本 。 

口 选择 时 , 转 到 URL 用 于 设置 所 需 跳 转 的 
网 页 地 址 ， 也 可 以 单 击 【 浏 览 〗 按 钮 ， 来 
选择 所 需 链接 的 文件 。 

口 打开 URL 于 用 于 设置 文件 打开 的 位 置 
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网 页 行为 特效 





其 中 【 主 窗口 〗 选 项 表示 在 同一 窗口 中 打 
开 文件 ， 而 【框架 】〗 选 项 则 表示 在 所 选 框 
架 中 打开 文件 。 
口 更 改 URL 后 选中 第 一 个 项 目 启用 该 复 
选 框 ， 可 以 使 用 菜单 选择 提示 。 
2. 跳 转 菜单 开始 
“ 跳 转 菜单 开始 ”行为 所 产生 的 下 拉 菜 单 比 一 
般 的 下 拉 菜 单 多 出 一 个 跳 转 按钮 , 其 跳 转 按钮 可 以 
为 各 种 形式 。 
在 网 页 中 选择 作为 跳 转 菜单 的 元 素 . 单 击 【 行 
为 】 面 板 中 的 【添加 行为 】 按 钮 ,在 弹出 的 菜单 中 
选择 【 跳 转 菜 单 开始 】 选 项 。 然 后 ,在 弹出 的 【 跳 
转 菜单 开始 】 对 话 框 中 , 设置 【选择 跳 转 菜单 】 选 
项 . 单 击 【 确 定 】 按 钮 即 可 。 











寺 择 关 转 芝 单 ”| jpltena 





根据 菜单 所 选择 的 素 引 转 到 URL。 











3. 转 到 URL 

“ 转 到 URL” 行为 可 在 当前 窗口 或 指定 的 框架 
中 打开 一 个 新 页 面 , 适用 于 通过 一 次 单 击 更 改 两 个 
或 多 个 框架 内 容 。 

在 页 面 中 选择 任意 一 个 元 素 . 单 击 【 行 为 】 面 
板 中 的 【添加 行为 ] 按钮 在 弹出 的 菜单 中 选择 【 转 
到 URL】 选 项 。 然后， 在 弹出 的 【 转 到 URL】 对 
话 框 中 , 设置 URL 选项 , 单 击 【 确 定 】 按 钮 即 可 。 




















在 URL 选项 中 ， 可 以 直接 输入 链接 地 址 ， 

也 可 以 单 击 【浏览 】〗】 按 钮 定位 需要 跳 转 的 文 
件 。 另 外 ， 在 【打开 在 】 列 表 框 中 ， 如 果 页 
面 中 不 存在 框架 , 则 只 显示 【 主 窗口 〗 选 项 。 
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此 时 , 在 【行为 】 面 板 中 将 显示 新 添加 的 转 到 
URL 行为 。 用 户 可 以 单 击 事 件 名 称 ， 在 弹出 的 列 
表 中 选择 onMouseOver (鼠标 经 过 时 ) 选项 . 更 改 
触发 事件 。 














16.3.4 设置 其 他 网 页 信息 行为 


Dreamweaver 除了 为 用 户 内置 了 窗口 信息 . 图 
像 信息 和 跳 转 信息 等 行为 之 外 . 还 为 用 户 内 置 了 一 
些 常用 的 网 页 信息 行为 ,包括 拖 动 AP 元 素 、 改 变 
显示 、 检 查 表单 等 行为 。 
1. 拖 动 AP 元 素 

“ 拖 动 AP 元 素 ” 行 为 可 以 让 访问 者 拖 动 绝对 
定位 的 (AP) 元素， 以 达到 相互 访问 的 目的 。“ 拖 
动 AP 元素 ”行为 主要 用 于 创建 拼 板 游戏 、 滑 块 控 
件 和 其 他 可 移动 的 界面 元 素 。 

首先 ， 在 页 面 中 插入 一 个 名 为 apDivl 的 Div 
标签 ,设置 其 CSS 样式 ， 并 在 Div 标签 中 插入 一 
个 图 片 元 素 。 选 择 该 图 片 ， 并 选中 apDiv1 标签 . 
在 【属性 】 面 板 中 将 【Z 轴 】 设 置 为 1 。 
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单 击 【 行 为 】 面 板 中 的 【添加 行为 】 按 钮 .在 
弹出 的 菜单 中 选择 【 拖 动 AP 元 素 】 选 项 。 并 在 弹 
出 的 【 拖 动 AP 元 素 】 对 话 框 的 【基本 】 选 项 卡 中 . 
设置 各 选项 。 














在 【基本 】 选项 卡 中 . 主要 包括 下 列 一 些 选项 。 
口 AP 元 素 用 于 选择 页 面 中 的 AP 元 素 。 
口 移动 用 于 设置 AP 元 素 的 移动 方式 ， 其 
中 【不 限制 〗 选 项 适用 于 拼 板 游戏 和 其 他 
拖 放 游戏 ， 而 【限制 〗 选 项 则 适用 于 滑 块 
控制 和 可 移动 布局 。 
口 放下 目标 ”用 于 设置 相对 于 AP 元 素 起 始 
位 置 的 绝对 位 置 。 
口 获得 目前 位 置 ” 单 击 该 按钮 ， 可 以 使 用 
AP 元 素 的 当前 放置 位 置 自动 填充 文本 框 。 
口 靠 齐 距离 ”用 于 确定 访问 者 必须 将 AP 元 
素 拖 到 距离 拖 放 目标 多 近 时 ， 才 能 使 AP 
元 素 靠 齐 到 目标 。 
然后 , 打开 【高 级 】 选 项 卡 ， 定 义 AP 元 素 的 
拖 动 控制 点 .跟随 触发 动作 .移动 触发 动作 等 选项 ， 
并 单 击 【确定 】 按 钮 。 
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【高 级 】 选 项 卡 中 ， 主 要 包括 下 列 一 些 选项 。 

口 拖 动 控制 点 ”用 于 设置 元 素 的 拖 动 方式 ， 
当选 择 【 整 个 元 素 〗】 选 项 时 ， 表 示 可 以 通 
过 单 击 AP 元 素 中 的 任意 位 置 来 拖 动 AP 
元 素 ; 而 选择 【元 素 内 的 区 域 〗】 选 项 时 ， 
则 表示 只 有 单 击 AP 元 素 的 特定 区 域 才 能 
拖 动 AP 元 素 ， 而 且 设置 左 和 上 坐标 以 及 
拖 动 控制 点 的 宽度 和 高 度 值 。 

口 拖 动 时 ”如果 AP 元 素 在 拖 动 时 应 该 移动 


到 堆肥 顺序 的 最 前 面 ， 则 需要 启用 【将 原 
始 置 于 顶层 】〗 复 选 框 ， 并 在 其 后 的 菜单 中 设 
置 AP 元 素 所 保留 的 堆 登 顺序 中 的 原 位 置 。 
口 呼叫 JavaScript 用 于 输入 在 拖 动 AP 元 
素 时 反复 执行 的 JavaScript 代码 或 函数 。 
口 放下 时 ， 呼 叫 JavaScript 用 于 输入 在 放下 
AP 元 素 时 执行 的 JavaScript 代码 或 函数 。 
口 只 有 在 靠 齐 时 ”启用 该 复 选 框 ， 表 示 只 有 在 
AP 元 素 到 达 拖 放 目 标 时 才 执 行 JavaScript。 
2. 改变 属性 
“改变 属性 ”行为 可 更 改 某 个 属性 (例如 div 
的 背景 颜色 或 表单 的 动作 ) 的 值 。 
在 网 页 中 选择 某 个 元 素 , 单 击 【行为 】 面 板 中 
的 【添加 行为 】〗 按 钮 ,在 弹出 的 菜单 中 选择 【改变 
属性 】 选 项 。 然 后 , 在 弹出 的 【改变 属性 】 对 话 框 
中 ,设置 各 选项 ， 单 击 【确定 】 按 钮 即 可 。 




















元 素 类 型 - [DIVY 
元 素 ID: [DTV “wpDivi” 


后 性 图 选择 |top 


OW: [ 





【改变 属性 】 对 话 框 中 ， 主 要 包括 下 列 4 个 


口 元 素 类 型 ”用 于 选择 需要 修改 属性 的 元 
素 类 型 ， 以 显示 该 类 型 的 所 有 标识 的 元 素 。 
口 元 素 ID 用 来 选择 需要 修改 属性 的 元 素 
名 称 。 
口 属性 用 来 设置 改变 元 素 的 属性 值 ， 如 选 
中 【选择 】〗 选 项 ， 则 可 以 在 其 下 拉 列 表 中 
选择 属性 值 如 选中 【输入 〗 选 项 ， 则 可 
以 在 文本 框 中 输入 属性 。 
口 新 的 值 ”用 于 设置 属性 的 新 值 。 
3. 显示 -隐藏 元 素 
“显示 -隐藏 元素” 行为 可 以 显示 、 隐 藏 或 恢复 
一 个 或 多 个 页 面 元 素 的 默认 可 见 性 , 主要 用 于 在 用 
户 与 页 面 进行 交互 时 所 显示 的 信息 。 例 如 . 当 用 户 
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将 鼠标 指针 移 到 一 个 图 像 上 时 . 可 以 显示 一 个 页 面 
元 素 . 该 页 面 元 素 给 出 有 关 该 图 像 的 基本 信息 。 
在 【行为 】 面 板 中 ， 单 击 【添加 行为 】 按 钮 , 
在 弹出 的 菜单 中 选择 【显示 -隐藏 元 素 】 选 项 。 然 
后 .在 弹出 的 【显示 -隐藏 元 素 】 对 话 框 中 选择 元 
素 . 单 击 【 显 示 】 或 【隐藏 】 按 钮 . 并 单 击 【 确 定 】 



































“显示 -隐藏 元 素 ” 仅 显示 或 隐藏 相关 元 素 ， 
在 元 素 已 隐藏 的 情况 下 ， 它 不 会 从 页 面 中 实 
际 删除 此 元 素 。 


4. 检查 插件 

“检查 插件 ”行为 可 根据 访问 者 是 否 安装 了 指 
定 的 插件 这 一 情况 将 它们 转 到 不 同 的 页 面 。 

在 【行为 】 面 板 中 ， 单 击 【 添 加 行为 】 按 钮 ， 
在 弹出 的 菜单 中 选择 【检查 插件 】 选 项 。 然 后 , 在 
弹出 的 【检查 插件 】 对 话 框 中 ,设置 相应 选项 单 
击 【确定 】 按 钮 即 可 。 





af Om IE 
口 入 
如 果 有 , 转 到 URL (六 ) 
否则 ,SURL [ |] [| 
口 如 果 无 检测 , 则 妆 终 转 到 第 一 个 URL 














其 中 , 在 【检查 插件 】 对 话 框 中 ,主要 包括 下 
列 一 些 选项 。 

口 插件 ”用 于 设置 检测 插件 类 型 ， 选 中 【 选 
中 】〗 选 项 则 可 以 在 列表 中 选择 内 置 插件 ， 
而 选中 【输入 〗 选 项 则 需要 在 文本 框 中 输 
入 插件 名 称 。 

口 如 果 有 , 转 到 URL 用 于 设置 为 安装 指定 
插件 的 访问 者 指定 ( 跳 转 ) 一 个 URL。 
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口 否则 , 转 到 URL 用 于 设置 为 未 安装 指定 
插件 的 访问 者 指定 ( 跳 转 ) 一 个 URL。 
口 如 果 无 法 检测 ， 则 始终 转 到 第 一 个 URL 
启用 该 选项 ， 当 浏览 器 无 法 检测 插件 时 直 
接 跳 转 到 上 面 所 设置 的 第 一 个 URL 中 。 
5. 检查 表单 
“检查 表单 ”行为 可 检查 指定 文本 域 的 内 容 以 
确保 用 户 输入 的 数据 类 型 正确 . 以 防止 在 提交 表单 
时 出 现 无 效 数 据 。 
在 【行为 】 面 板 中 . 单 击 【 添 加 行为 】 按 钮 ， 
在 弹出 的 菜单 中 选择 【检查 表单 】 选 项 。 然 后 . 在 
弹出 的 【检查 表单 】 对 话 框 中 . 设置 各 项 选项 , 单 
击 【 确 定 】 按 钮 即 可 。 























| 人 本 志和 
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口 电子 师 件 地 址 雪子 从 到 











【检查 表单 】 对 话 框 中 , 主要 包括 下 列 一 些 选项 。 

口 域 用 于 显示 页 面 中 的 所 有 文本 域 ， 便 于 
用 户 进行 选择 。 

口 值 启用 【必需 的 〗 复 选 框 ， 表 示 浏 览 者 
必需 填写 此 项 目 。 

口 可 接受 用 于 设置 用 户 填写 内 容 的 要 求 ， 
当选 中 【任何 东西 〗 选 项 时 ， 检 查 必需 域 
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中 包含 数据 ， 数 据 类 型 不 限 ; 选中 【数字 】 
选项 ， 检 查 域 中 只 包含 数字 ; 选中 【电子 邮 
件 地 址 〗】 选 项 ， 检 查 域 中 包含 一 个 @ 符 号 ; 
选中 【数字 从 〗】 选 项 ， 表 示 检 查 域 中 包含 特 
定 范围 的 数字 。 


使 用 “检查 表单 ”行为 在 浏览 器 中 所 产生 的 
提示 框 中 的 文本 为 英文 文本 ， 此 时 用 户 可 通 


过 【代码 】〗 视 图 修改 代码 的 方法 ， 将 英文 修 
改 为 中 文 。 





6. 调用 JavaScript 

“调用 JavaScript 行为 可 以 在 事件 发 生 时 执行 
自 定义 的 函数 或 JavaScript 代码 。 

在 【行为 】 面 板 中 ， 单 击 【 添 加 行为 】 按 钮 . 
在 弹出 的 菜单 中 选择 【调用 JavaScript】 选 项 。 然 
后 . 在 弹出 的 【调用 JavaScript】 对话 框 中 ， 准 确 
地 输入 所 需 执行 的 JavaScript 或 函数 名 称 。 

例如 , 若 要 创建 一 个 “后 退 ” 按 钮 ,可 以 输入 
让 (historylength>0){fhistoryback0}。 如 果 用 户 已 将 
代码 封装 在 一 个 函数 中 , 则 只 需 输入 该 函数 的 名 称 
(例如 hGoBack0)。 完 成 输入 之 后 ， 单 击 【确定 】 
按钮 即 可 。 




















调用 JavaScript 


JavaScript [hooBack() 





| 确定 
[取消 
[帮助 
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Dreamweaver CC 在 【行为 】 面 板 中 新 增加 了 
一 种 “效果 ”行为 ， 它 隶属 于 jQuery 效果 . 不 仅 
可 以 创建 动画 过 渡 效 果 , 而 且 还 可 以 以 可 视 化 操作 
的 方式 来 修改 页 面 元 素 。 


16.4.1 设置 Blind 效果 


Blind 效果 可 以 实现 网 页 元 素 的 折叠 隐 藏 或 显 
示 效 果 。 











在 【行为 】 面 板 中 ， 单 击 【添加 行为 】 按 钮 , 
在 弹出 的 菜单 中 选择 【效果 】|Blind 选项 。 然 
在 弹出 的 Blind 对 话 框 中 , 设置 各 项 选项 . 
定 】 按 钮 即 可 。 

Blind 对 话 框 中 ， 主 要 包括 下 列 4 种 选项 。 

口 目标 元 素 ”用 于 选择 需要 添加 折 受 隐藏 

或 显示 效果 的 元 素 。 
口 效果 持续 时 间 用 于 设置 效果 所 持续 的 











时 间 ， 以 毫秒 为 单位 。 


























口 可 见 性 用 于 设置 效果 的 显示 类 型 ， 选 择 
hide 选项 表示 实现 隐藏 效果 ， 选 择 show 
选项 表示 实现 显示 效果 ， 选择 toggle 选项 

口 方向 用 于 设置 效果 的 方向 ， 包括 由 
(上 )、down (下 )、left ( 左 )、right ( 右 )、 
vertical ( 重 直 ) 和 horizontal (水 平 ) 6 个 
方向 。 


16.4.2 ”设置 Highlight 效果 


Highlight 效果 可 以 实现 高 光 颜色 过 渡 到 渐 隐 
渐 现 的 效果 。 

在 【行为 】 面 板 中 ， 单 击 【 添 加 行为 】 按 钮 
在 弹出 的 菜单 中 选择 【效果 】|Highlight 选项 。 然 
后 ,在 弹出 的 Highlight 对 话 框 中 设置 各 项 选项 ， 
单 击 【确定 】 按 钮 即 可 。 


目标 元 素 ， [div “box” 
效果 持续 时 间 : [1000 ms 


可 见 性 [show v] 
颜色 : ||Wffff99 





其 中 , 在 Highlight 对 话 框 中 ， 主 要 包括 下 列 
4 个 选项 。 

口 目标 元 素 ”用 于 选择 需要 添加 折 受 隐藏 
或 显示 效果 的 元 素 。 

口 效果 持续 时 间 ”用 于 设置 效果 所 持续 的 
时 间 ， 以 毫秒 为 单位 。 

口 可 见 性 用 于 设置 效果 的 显示 类 型 ， 选 择 
hide 选项 表示 实现 隐藏 效果 ， 选 择 show 
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选项 表示 实现 显示 效果 ， 选择 toggle 选项 
表示 隐藏 或 显示 效果 。 

口 颜色 用 于 设置 效果 显示 的 背景 颜色 ， 可 
通过 单 击 【 颜 色 框 〗】 在 展开 的 拾取 器 中 选 
择 背 录 颜 色 。 


16.4.3 其 他 jQuery 效果 


在 Dreamweaver CC 中 .除了 新 增 了 Blind 和 
Highligh 效果 行为 之 外 ， 还 包括 下 列 10 种 效果 。 

口 Bounce 用 于 实现 元 素 的 抖动 效果 ,可 以 
设置 抖动 的 可 见 性 、 效 果 持续 时 间 、 方 向 、 
频率 和 幅度 。 

口 Clip 用 于 实现 元 素 的 收缩 隐藏 效果 ， 可 
以 设置 收缩 隐藏 的 方向 、 效 果 持 续 时 间 和 
可 见 性 。 

口 Drop 用 于 实现 元 素 向 某 个 方向 渐 隐 或 
渐 现 的 效果 ， 可 以 设置 该 效果 的 持续 时 
间 、 可 见 性 和 方向 。 

口 Fade 用 于 实现 元 素 在 当前 位 置 渐 隐 或 
渐 现 的 效果 ， 可 以 设置 该 效果 的 持续 时 间 
和 显 可 见 性 。 

口 Fold 用 于 实现 元 素 在 重 直 或 水 平方 向 
上 的 动态 隐藏 或 显示 ， 可 以 设置 该 效果 的 
持续 时 间 、 可 见 性 、 水 平 优先 和 大 小 。 

口 Puff 用 于 实现 元 素 逐 渐 放 大 并 渐 隐 或 渐 
现 的 效果 ， 可 以 设置 该 效果 的 持续 时 间 、 
可 见 性 和 百分比 。 

口 Pulsate 用 于 实现 元 素 在 原 位 置 闪烁 并 
过 渡 到 渐 隐 或 渐 现 的 效果 ， 可 设置 该 效果 
的 持续 时 间 、 可 见 性 和 闪烁 次 数 。 

口 Scale 用 于 实现 元 素 按 比例 地 进行 缩放 
并 过 渡 到 渐 隐 或 渐 现 的 效果 ， 可 以 设置 该 
效果 的 持续 时 间 、 可 见 性 、 方 向 、 原 点 下 
原点 下 百分比 和 小 数位 数 。 

口 Shake 用 于 实现 元 素 在 原 位 置 晃动 的 效 
果 ， 可 以 设置 该 效果 的 持续 时 间 、 方 向 、 
次 数 和 距离 。 

口 Slide 用 于 实现 元 素 向 指定 方向 移动 一 
定 距离 并 过 渡 到 隐藏 或 显示 的 效果 ， 可 设置 
该 效果 的 可 持续 时 间 、 可见 性 、 方 向 和 距离 。 
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前 练习， 制作 网 页 导航 


Dreamweaver 内 置 的 行为 可 以 轻松 地 实现 一 些 常用 的 网 页 特效 . 
如 “交换 图 像 ” 行 为 可 以 实现 动态 导航 条 效果 . 而 “打开 浏览 器 窗口 “ 
行为 则 可 以 实现 弹出 广告 效果 。 在 本 练习 中 . 将 通过 制作 网 页 导航 来 
详细 介绍 网 页 行为 特效 的 设置 方法 。 

















插入 表格 
设置 表格 属性 
设置 单元 格 属性 
插入 图 像 

使 用 “交换 图 像 ” 
行为 

使 用 “打开 浏览 器 ” 
行为 

















操作 步骤 “》》》 STEPI03 打开 【链接 (CSS)] 选项 卡 , 设置 大 小 
STEP|01 设置 页 面 属性 . 新 建 空 白文 档 . 单 击 【 属 ”和 链接 颜色 。 
性 】 面 板 中 的 【页 面 属性 】 按 钮 ， 设 置 外 观 CSS。 


4 Ga) 
页 本 字 休 亿 ): 后台 认 字 人 
大 4 全 ve 
aa 
Ht): 
到) 
重 页 


nv: J 本 STEP|04 打开 【标题 /编码 】 选 项 卡 ， 输 入 标题 文 


上 边 拭 (2) 


| gms | 本 ， 并 单 击 【 确 定 】 按 钮 。 





CR | | 








STEP|02 打开 【外 观 (HTML)】 选 项 卡 , 将 【上 
边 距 】 设 置 为 20。 





STEP|05 插入 表格 和 图 像 。 执行 【插入 】|【 表 格 】 
命令 .在 弹出 的 Table 对 话 框 中 ,设置 表格 尺寸 . 
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并 单 击 【确定 】 按 钮 。 

















STEP|06 选择 表格 ， 在 【属性 】 面 板 中 将 Align 
设置 为 【居中 对 齐 】。 
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STEP|09 添加 其 他 内 容 。 在 网 页 空白 区 域 插入 一 
个 3 行 2 列 . 宽度 为 700 像素 的 表格 . 并 在 【属性 】 
面板 中 将 Align 设置 为 【居中 对 齐 】。 
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STEP|07 将 光标 放置 于 第 1 行 中 ,执行 【插入 ]】 | 
【图 像 】 命 令 . 选择 图 像 文 件 ， 单 击 【 确 定 】 按 钮 。 
用 同样 的 方法 ， 分 别 插入 其 他 图 像 。 














一- mas] 选择 |。 
Ex EE sjpg riohtipg 
局 eco 国 rightmenjpg 
homejpg 加 soluionsjpg 
1 于 区 


(rn 
El 


文件 名 IN |brandjpg 








STEPI08 选择 “首页 ”图 像 . 将 【属性 】 面 板 中 








er RE 
Eee ee 
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STEP|10 将 光标 定位 在 第 1 行 第 1 列 单元 格 中 ， 
执行 【插入 】|【 图 像 】| 【图像 】 命 令 ， 在 单元 格 
中 插入 一 个 图 像 。 
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STEP|11 合并 第 2 行 第 2 列 和 第 3 行 第 2 列 的 单 








Te ee el er 





元 格 . 执行 【插入 】| 【图 像 】| 【图 像 】 命 令 , 在 
单元 格 中 插入 一 个 图 像 。 
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STEP|12 在 第 2 行 第 2 列 单元 格 中 插入 一 个 图 像 . 
同时 合并 第 3 行 中 的 所 有 单元 格 , 并 为 其 插入 相应 
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STEP|13 在 网 页 的 空白 区 域 . 插入 一 个 2 行 1 列 
的 表格 , 设置 表格 和 单元 格局 性 并 输入 版 属 文本。 


mg Src Tnages/hone] footJpa™ WiGEPE A 



























> 首页 </a> | <a 
href="em 妆 
right &copy; 中 联 公 
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STEP|14 添加 交换 图 像 行为 。 执 行 【 窗 口 】|【 行 
为 】 命 令 ， 在 【行为 】 面 板 中 ， 单 击 【 添 加 行为 】 
按钮 , 选择 【交换 图 像 】 选 项 。 

STEP|15 在 弹出 的 【交换 图 像 】 对 话 框 中 . 选 
择 【 图 像 】 列 表 框 中 的 图 形 文件 ， 并 单 击 【浏览 
按钮 。 




























































避 预先 数 和 图 保 
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STEP|16 然后 ， 在 弹出 的 【选择 图 像 源 文件 】 对 
话 框 中 ,选择 图 像 文件 ， 并 单 击 【 确 定 】 按 钮 。 用 
同样 的 方法 ,分 别 为 其 他 图 像 添 加 交换 图 像 行为 。 























images » exchange 











STEP|17 添加 打开 浏览 器 行为 。 单 击 【 添 加 行为 】 
按钮 . 选择 【打开 浏览 器 窗口 】 选项 。 在 弹出 的 【 打 
开 浏览 器 窗口 】 对 话 框 中 ， 单 击 【 浏 览 】 按 钮 。 














打开 浏览 吕 突 口 [x 
[本 
[下 消 | 
于 助 | 
口 是 要 时 使 用 闲 功 条 
口 调整 大 小 手打 





STEP|18 在 弹出 的 【选择 文件 】 对 话 框 中 . 选 





满 


浏览 器 窗口 文件 ， 并 单 击 【 确 定 】 按 钮 。 








EIN: [dos adhtml 








STEP|19 然后 , 在 【打开 浏览 器 窗口 】 对 话 框 中 


要 显示 的 URL jz>1g=_ad. htal 
窗口 商 度 239 

口 条 条 
\ 刁 要 时 使 用 条 


入 口 袍 度 | 385 
后 隆 口 ] 号 航 工具 巷 
口 地 址 : 
Dasl OK 三 ] 
而 名 称 [| 


将 【窗口 宽度 】 设 置 为 385.【 窗 口 高 度 】 设 置 为 
239， 并 单 击 【 确 定 】 按 钮 。 





] BR 


设置 | #5 
| 





[和 练 习 : 制作 企业 首页 


Dreamweaver 内 置 的 行为 功能 , 可 以 更 改 一 个 或 多 个 页 面 元 素 的 
可 见 属性 。 当 鼠标 指向 或 离开 一 个 页 面 对 象 时 , 显示 或 隐藏 包含 该 对 
象 相关 信息 的 页 面 元 素 , 即 增加 了 网 页 的 美观 性 又 体现 了 网 页 的 交互 
性 。 在 本 练习 中 ,将 通过 制作 包含 动态 图 像 导 航 条 的 企业 首页 网 页 , 
来 详细 介绍 Dreamweaver 行为 的 使 用 方法 。 





首页 | 关于 我 人 | 8 务 | 产品 展示 | 间作 项 号 | 联系 我 们 








操作 步骤 >》 





插入 Div 
插入 图 像 
插入 表格 


设置 表格 属性 
添加 “显示 -隐藏 ” 
行为 





STEP|01 设置 页 面 属性 . 新 建 空白 文档 . 单 击 【 属 
性 】 面 板 中 的 【页 面 属性 】 按 钮 .在 弹出 的 对 话 框 
中 设置 大 小 和 文本 颜色 。 

STEP|02 打开 【外观 (HTML)】 选 项 卡 . 将 【上 
边 距 】 设 置 为 20。 

STEP|03 打开 【链接 (CSS)】 选项 卡 . 设置 大 小 
和 和 链接 颜色 。 








sm: 去 
Toj:[] 丙 


3 | 示 用 人 








网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 





许 G): 国 
双 四 :国政 emegm: 国 一] 
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区 E3 














4 二 痢 css) 


注 三 网 页 制作 与 网 站 组 建 ( CC 2015 中 文 版 ) 从 新 手 到 高 手 ::: 


STEP|06 选择 表格 . 在 【属性 】 面 板 中 . 将 Align 
设置 为 【居中 对 齐 】。 
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各 全 过 休 0)， 加 CE 天 | @ 设 去] 
人 [号 辐 
四 远 择 | 


人: 图 备 动 相 接 (): 四 | 
天皇 式 (00: 有 下 





调 守 || 由 清 





区 | 











STEP|04 打开 【标题 /编码 】 选项 卡 . 输入 标题 文 
本 ， 并 单 击 【 确 定 】 按 钮 。 


机) lie | 量 呈 吉 入 (3) 
y 化 吉 间 7) [5 (二 站 分 钙 ， 局 时 规范 后 厅 》 
四 远 掺 Dl taieod SS (io 人 6) 
文件 久 件 末 : 与 av \ 
Ee Os Jose 


[0 | We 】 WN [2) 





STEP|05 制作 版 头 内 容 。 执 行 【 插 入 】| 【表格 】 
命令 ,在 弹出 的 Table 对 话 框 中 ,设置 表格 尺寸 . 
并 单 击 【 确 定 】 按 钮 。 











表格 宽度 ] 766 

边 柜 息 细 ] 0 
单元 格 边 下 |0 
单元 格 间 古 0 








铺 素 
| 合 科 
] 园 
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蔬 助 功能 
标题 :| 
笋 要 -| 


La 
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取消 
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STEP|07 将 光标 定位 在 第 1 行 第 1 列 单元 格 中 
在 【属性 】 面 板 中 ,设置 其 【 宽 】 【水 平 】 和 【 背 
景 颜色 】 属 性 。 


Tr 





PN por Pr Tr 

















STEP|08 然后 , 在 【代码 】 视 图 中 ,输入 全 角 空 
格 符 及 文本 ， 并 设置 文本 的 链接 属性 。 


td width="622" align="Left" bgcolor="#0696ff"> &nbsp; 


<a href="#"; 首 页 </a> 


<a href="#"> 关 于 我 们 </a> 














STEP|09 在 【设计 】 视 图 中 ,选择 第 1 行 第 2 列 
单元 格 . 执行 【插入 】〗| 【图 像 】 命 令 ， 为 该 单元 
格 插 入 图 像 。 






































STEP|10 合并 第 2 行 中 的 所 有 单元 格 . 在 【属性 】 
面板 中 设置 【高 】 和 【背景 颜色 】 属 性 值 。 





《yimn| 本 或 fi) 无 


DG) 无 | 














STEP|11 执行 【插入 】IDiv 命令 ， 在 弹出 的 【 插 
入 Div】 对 话 框 中 , 输入 ID 名 称 ， 并 单 击 【新 建 


CSS 规则 】 按 钮 。 


所 X' [在 括 入 点 
< 加 给 入 
ID: (wniv! 加 





STEP|12 在 弹出 的 【新 建 CSS 规则 】 对 话 框 中 
直接 单 击 【确定 】 按 钮 。 








第 16 章 为 特效 
STEP|13 在 弹出 的 【# apDivl 的 CSS 规则 定义 】 
对 话 框 中 ,打开 【背景 ] 选项 卡 ， 单 击 【 浏 览 】 按 
钮 ， 选择 背景 图 片 。 


网 页 行 























Bake omaporition OD) 
Batkg omd-porition 四 | 


Lume | 





STEP|14 打开 【定位 】 选 项 卡 . 设置 Div 的 宽度 、 
高 度 等 选项 。 





STEP|15 打开 【 方 框 】 选 项 卡 . 禁用 Margin 复 选 
框 , 设置 相应 选项 并 单 击 【 确 定 】 按 钮 。 





STEP|16 使 用 同样 的 方法 .在 该 单元 格 中 插入 名 
为 apDiv2、apDiv3、apDiv4 和 apDivs 的 Div 层 . 
并 分 别 设置 其 CSS 规则 。 











ges/brand. jpg” width="144" height="a7" 


oresoerr 
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网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 


STEP| 们 制作 导航 条 .在 网 页 空白 区 域 插入 一 个 1 
行 6 列 的 表格 . 并 在 【属性 】 面 板 中 设置 其 Align 
属性 。 











rr Tr ET 





























STEP|18 选择 第 1 列 单元 格 . 执行 【插入 】| 【图 
像 】 命 令 , 为 其 插入 图 像 。 使 用 同样 的 方法 . 分别 
在 其 他 单元 格 中 插入 相应 的 图 像 。 


rr ee er ee 本 OO 






































STEP|19 制作 主体 内 容 。 在 网 页 的 空白 区 域 插入 
一 个 5 行 2 列 的 表格 ， 并 在 【属性 】 面 板 中 设置 



























人) 5 
| clrz lspaea 
I 国 Firse 
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于 ee | 但 素 ~] Eula 

















STEP|20 选择 第 1 行 第 1 列 单元 格 . 执行 【插入 】 
| 【图 像 】 命 令 ， 为 该 单元 格 插入 相应 的 图 像 。 使 








图 像 。 




















STEP|21 合并 第 2 列 中 前 4 行 的 单元 格 ， 在 【 属 
性 】 面 板 中 设置 单元 格 的 背景 颜色 和 宽度 值 。 


TTPO PPP LPT TP :TTR ,TR PR ss POR PPR PR 











党 | 无 
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STEP|22 在 该 单元 格 内 插入 一 个 Div 标签 ,新建 


标签 CSS 规则 ， 并 在 其 内 输入 相应 的 文本 信息 。 


[ER 





五 RT 














STEP|23 合并 第 5 行 中 的 所 有 单元 格 , 在 【属性 】 
面板 中 设置 单元 格 的 基本 属性 ， 并 为 其 添加 文本 。 
STEP|24 添加 交互 行为 。 选 择 “ 关 于 我 们 ”图 像 , 
在 【属性 】 面 板 中 将 其 ID 设置 为 about us。 使 用 
同样 的 方法 . 分别 设置 其 他 图 像 的 人 D。 
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STEP|27 单 击 【 添 加 行为 】 按 钮 ， 选择 【交换 图 
像 】 选 项 。 在 弹出 的 【交换 图 像 】 对 话 框 中 ,选择 
图 像 文件 ， 单 击 【浏览 】 按 钮 。 











"mas -区 Oh 
omgoF YTOA E73 


























STEP|25 在 【行为 】 面 板 中 ， 单 击 【 添 加 行为 ] 

按钮 ,选择 【显示 -隐藏 元 素 】 选项。 在 弹出 的 【 显 ”STEP|28 然后 ， 在 弹出 的 【选择 图 像 源 文件 】 对 
示 -隐藏 元 素 】 对 话 框 中 ,选择 相应 的 元 素 ， 并 单 ” 话 框 中 选择 图 像 文件 ,并 单 击 【 确 定 】 按 钮 。 使 用 
击 【 确 定 】 按 钮 。 同样 的 方法 ， 为 其 他 元 素 添加 交互 行为 。 

















EN [cortact ssjpo (Cr po 


STEP|26 然后 . 在 【行为 】 面 板 中 . 单 击 【事件 】 


167 


练习 1: 制作 多 方面 产品 展示 图 像 】〗 选 项 。 然 后. 在 弹出 的 【交换 图 像 】 对 话 框 中 


Ddownloads\14\ 新 于 训练 营 \ 多 方面 产品 展示 选择 列表 框 中 的 目标 图 像 . 单 击 【浏览 】 按 钮 设置 替 

= Es 、 换 图 像 ， 单 击 【 确 定 】 按 钮 即 可 。 最 后 ,在 【行为 】 
提示 : 本 练习 中 ,首先 打开 素材 文件 ， 选 择 第 1 。 面板 中 定义 行为 的 触发 事件 即 可 
个 计算 机 图 像 . 单 击 【 添 加 行为 】 按 钮 .选择 【交换 
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: 网 页 制作 与 网 站 组 建 (CC 2015 中 文 版 ) 从 新 手 到 高 手 :::: 


面 背景 。 然 后 . 在 网 页 中 插入 一 个 名 为 apDivl 的 Div 
层 . 并 新 建 该 层 的 CSS 样式 。 使 用 同样 的 方法 ,分别 
插入 其 他 8 个 类 似 的 Div 层 和 1 个 外 边框 Div 层 . 并 
分 别 创建 其 CSS 规则 。 最 后 , 单 击 【 添 加 行为 】 按钮 ， 
选择 【 拖 动 AP 元 素 】 选 项 ， 在 弹出 的 对 话 框 中 设置 

















Wocmo 系列 电脑 外 
会 xnaex 


村 件 、 文 伯 夫 | 








练习 2: 制作 产品 详细 介绍 
信 downloads\14\ 新 手 训 练 营 \ 产 品 详细 介绍 
提示 : 在 本 练习 中 ., 首先 打开 素材 文件 . 选择 “更 
多 详情 ”图 像 ， 单 击 【添加 行为 】 按 钮 ,选择 【打开 
浏览 器 窗口 】 选 项 。 然 后 ,在 弹出 的 【打开 浏览 器 窗 
口 】 对 话 框 中 , 设置 相应 的 选项 . 单 击 【 确 定 】 按 钮 。 
最 后 ,使 用 同样 的 方法 ,分 别 为 其 他 “更 多 详情 ”图 
像 添 加 交互 行为 。 

















练习 3: 制作 拼图 游戏 
今 downloads\14\ 新 手 训 练 营 \ 拼 图 游戏 
提示 : 在 本 练习 中 ,首先 设置 页 面 属 性 . 添加 页 





相应 的 选项 即 可 。 











练习 4: 制作 豪宅 别墅 网 站 
全 downloads\14\ 新 手 训练 营 \ 豪 宅 别墅 网 站 
提示 : 在 本 练习 中 ,首先 在 【代码 】 视 图 中 , 输 
入 框架 代码 ,制作 网 站 框架 。 然 后 关闭 框架 文档 ， 打 
开 相 应 的 素材 文件 ,通过 插入 Div 层 , 创建 CSS 规则 ， 
以 及 插入 文本 等 操作 ， 来 制作 网 站 首页 。 


豪宅 别 枝 。 


Welcome to Country*house 





然后 ,打开 相应 的 框架 模板 ,通过 插入 Div 
层 、 表格、 图 像 、 文 本 ， 以 及 定义 CSS 规则 等 方 
法 . 来 制作 网 站 的 详细 页 面 。 












::: 第 16 章 网 页 行为 特效 





练习 5: 制作 时 尚 饰品 店 网 站 接 到 其 他 副 页 面 。 


全 downloads\14\ 新 手 训练 营 \ 时 尚 饰品 网 店 aa 
提示 : 在 本 练习 中 ， 首 先 通过 设置 页 面 属性 . a ee 
插入 Div 层 . 定义 层 CSS 规则 ， 以 及 插入 图 像 ， 


插入 鼠标 经 过 图 像 和 输入 HIML 代码 等 方法 . 来 
制作 固定 页 面 。 


| 下 < un 

















= 
e- 





























然后 , 根据 导航 栏 的 链接 文本 . 分 别 制作 内 容 
页 面 , 使 该 网 站 在 不 弹出 页 面 的 情况 下 从 主页 面 链 





